很多刚接触前端的人都会遇到removeEventListener无法清除监控的情况。下面文章主要介绍removeEventListener取消js中事件监控的坑。通过示例代码介绍的非常详细,有需要的朋友可以参考一下。
从addEventListener开始,编写代码。
onMounted(()={
window.addEventListener(click ,()={
Dosh (param)//param是参数
})
})
AddeventListener有一个箭头函数回调函数,本身不能传递参数(当然Event除外)。如果要传递参数,只能在doSth函数中上传。我们也可以用函数代替箭头函数回调函数,但是这个函数显然不能有参数。
onMounted(()={
Window.addeventlistener (click ,dosh)//这个dosh没有参数。
})
要让doSth有参数,可以在函数外面包装一层函数。
设doSth1=()={
多思(参数)
}
onMounted(()={
Window.addeventlistener (click ,dosh1)//这个dosh 1就是包装在外面的函数。
})
以上原则都适用于removeEventListener,但对于emoveEventListener还有一点需要注意,见下文。
onMounted(()={
window.addEventListener(click ,()={
多斯()
})
})
未安装(()={
window . removeeventlistener( click ,()={
多斯()
})
})
上面的代码是
通不过
,因为removeEventListener的第二个参数,也就是回调函数,必须和addEventListener的回调函数是同一个函数,共享内存,下面写的就行了。onMounted(()={
window.addEventListener(click ,doSth)
})
未安装(()={
window . removeeventlistener( click ,doSth)
})
但是上面的写法还是不能传参数,所以如果要传参数,还是要外包一个函数,如下
设doSth=(str: string)={
console . log(str);
}
设doSth1=()={
多斯(“哈哈”)
}
onMounted(()={
window.addEventListener(click ,doSth1)
})
未安装(()={
window . removeeventlistener( click ,doSth1)
})
但是,如果使用ts,doSth函数的参数可以是可选参数,如下所示
让doSth=(str?string)={
if (typeof str==string) {
console . log( passed );
}否则{
Console.log(无引用);
}
}
onMounted(()={
window.addEventListener(click ,doSth)
})
未安装(()={
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添加任意类型。
让doSth: any=(str: string)={
if (typeof str==string) {
console . log( passed );
}否则{
Console.log(无引用);
}
}
onMounted(()={
window.addEventListener(click ,doSth)
})
未安装(()={
window . removeeventlistener( click ,doSth)
})
当然,原因还是不明白。唉,慢慢来。
总结
关于removeEventListener在js中取消事件监控的这篇文章到此为止。有关removeEventListener取消事件监视的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!