removeEventListener取消事件监听的坑

Posted 2023-04-10 自己瞎琢磨

从addEventListener说起，上代码

onMounted(() => 
    window.addEventListener("click", ()=>
        doSth(param)//param为参数
    )
)

addEventListener有一个箭头函数回调函数，这个函数本身不能传参（当然event除外），如果你要传参，只能在doSth函数上传，我们也可以将箭头函数回调函数替换成一个函数，但是这个函数明显不能有参数

onMounted(() => 
    window.addEventListener("click", doSth)//这个doSth就没有参数了
)

非要让doSth有参数，可以在函数外面包上一层函数

let doSth1=()=>
    doSth(param)

onMounted(() => 
    window.addEventListener("click", doSth1)//这个doSth1就是外面包装的函数
)

以上的原理都适用于removeEventListener，但是emoveEventListener还有一个注意点，见下

onMounted(() => 
    window.addEventListener("click", () => 
        doSth()
    )
)
onUnmounted(() => 
    window.removeEventListener("click", () => 
        doSth()
    )
)

以上这样的代码是通不过的，因为removeEventListener的第二个参数，也就是那个回调函数必须和addEventListener的回调函数是同一个函数，共享内存，下面这种写法就行得通

onMounted(() => 
    window.addEventListener("click", doSth)
)
onUnmounted(() => 
    window.removeEventListener("click",doSth)
)

然而，上面这种写法还是不能传参，所以要传参的话还是要外包一个函数，如下

let doSth = (str: string) => 
    console.log(str);

let doSth1 = () => 
    doSth("haha")


onMounted(() => 
    window.addEventListener("click", doSth1)
)
onUnmounted(() => 
    window.removeEventListener("click", doSth1)
)

然而，如果你用ts的话，doSth函数的参数可以是一个可选参数，如下

let doSth = (str?: string) => 
    if (typeof str == "string") 
        console.log("传参了");
     else 
        console.log("没传参");
    


onMounted(() => 
    window.addEventListener("click", doSth)
)
onUnmounted(() => 
    window.removeEventListener("click", doSth)
)

这样的情况则会提示一则消息：

没有与此调用匹配的重载。
  第 1 个重载(共 2 个)，“(type: "click", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void”，出现以下错误。
  第 2 个重载(共 2 个)，“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void”，出现以下错误。

当然这样实际运行是可以的，没什么问题，但是报错很难看，解决这个问题又不想在外面包上一层函数，那么可以直接给doSth加上any类型

let doSth: any = (str: string) => 
    if (typeof str == "string") 
        console.log("传参了");
     else 
        console.log("没传参");
    


onMounted(() => 
    window.addEventListener("click", doSth)
)
onUnmounted(() => 
    window.removeEventListener("click", doSth)
)

 当然其中原因还是没能搞懂，唉，慢慢来吧

javascript事件监听

使用addEventListener() 方法用于向指定元素添加事件句柄，而且添加的事件句柄不会覆盖已存在的事件句柄，同时可以向一个元素添加多个事件句柄，可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

使用 removeEventListener() 方法来移除事件的监听。

语法：addEventListener(event, function, useCapture);

useCapture 的默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

语法：removeEventListener("mousemove", myFunction);

 

<span id="event">监听事件</span>
<script>
event = document.getElementById(‘event‘);
event.addEventListener(‘click‘,function(){alert(‘点击事件监听‘);});
event.addEventListener(‘click‘,function(){alert(‘第二个点击事件‘);});
event.addEventListener(‘onmouseout‘,function(){alert(‘绑定鼠标离开事件‘)})
event.removeEventListener();
</script>