事件监听清除&箭头函数&传参

最新推荐文章于 2024-09-01 20:08:48 发布

Taoika

最新推荐文章于 2024-09-01 20:08:48 发布

阅读量1.2k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/hello_helloworld/article/details/132316815

版权

文章讲述了如何正确地在JavaScript中清除事件监听，指出直接使用`removeEventListener`时需要传递函数名而非函数调用，特别提到了在React中避免重复声明和使用`onKeyDown`替代`addEventListener`的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误示范

window.addEventListener('keydown', (event) => handleKeyDown(event), true);
window.removeEventListener('keydown', (event) => handleKeyDown(event), true);

这样是清除不了事件监听的，因为传进去的实质是两个不一样的函数

只传event

如果只是要传event，是比较好办的，直接写就行了,event会自己传进去的

const handleKeyDown = (event: KeyboardEvent) => { // 按键处理
  console.log(event);
}
window.addEventListener('keydown', handleKeyDown, true);
window.removeEventListener('keydown', handleKeyDown, true);

不仅仅传event

在使用addEventElistener的前提下，我并没有找到方法来解决这个问题，因为想要成功清除，那么必须使用函数名作为第二个参数而不是函数调用。
但是在使用onKeydown这种监听方式的话，是有办法解决的的，因为onKeyDown这种只会有一个监听器，下一个监听会覆盖上一个监听，所以我们可以用一个“空的函数”来覆盖掉那个我们不需要的函数
而我清除监听的目的是避免react造成的重复声明，因此，使用onKeyDown就足够了，并且也不需要我手动去清除监听了。

const handleMouseDown = (event: MouseEvent, audio: HTMLAudioElement) => {
    // ...
}
progress.onmousedown = (event) => handleMouseDown(event, audio)