javascript - 如何使用 typescript 将参数传递给 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 使用 typescript 返回错误，我不知道如何避免。

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);