如何使用打字稿将参数传递给 addEventListener 侦听器函数？

Question

情况有点像：

const searchKeyPressHandler = (appDispatch: any, e: any) => {
    if (e.keyCode === 27) {
        appDispatch({ type: "closeSearch" })
    }
}

document.addEventListener("keyup", searchKeyPressHandler); // <-- error on searchKeyPressHandler
return () => document.removeEventListener("keyup", searchKeyPressHandler); // <-- error on searchKeyPressHandler

searchKeyPressHandler 使用打字稿返回错误，我不知道如何避免它。

document.addEventListener("keyup", function (e) { searchKeyPressHandler(appDispatch, e) }); 可能是addEventListener的解决方案

但它对removeEventListener 没有用，因为该事件永远不会被删除 return () => document.removeEventListener("keyup", function (e) { searchKeyPressHandler(appDispatch, e) });.

Answer 1

只需将实际的事件处理程序包装在一个匿名函数中，然后该函数就可以使用其参数调用您的函数。但是不要忘记事件处理程序会自动传递对触发它们的事件的引用，因此请在外部处理程序中捕获它并将其与其他参数一起传递：

document.addEventListener("keyup", function(event){ searchKeyPressHandler(event, x,y,z); });

或者，如果您需要多次使用您设置为“包装器”的函数（在以后必须删除侦听器的情况下），您只需使用名称声明该函数并传递将该名称转换为.addEventListner()，如下所示：

function handler(event){ 
  searchKeyPressHandler(event, x,y,z); 
}

document.addEventListener("keyup", handler);

// And later...
document.removeEventListener("keyup", handler);