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

编程问答 2022-08-16

问题描述

情况有点像：

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",e) });。

error

解决方法

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

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

或者，如果您需要多次使用被设置为“包装器”的功能（在以后必须删除监听器的情况下），则只需使用名称声明该功能并传递将该名称添加到.addEventListner()中，如下所示：

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

document.addEventListener("keyup",handler);

// And later...
document.removeEventListener("keyup",handler);
dom-eventsevent-listenerjavascripttypescripttypescript