关于js中removeEventListener取消事件监听的坑
从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)
})当然其中原因还是没能搞懂，唉，慢慢来吧
总结
到此这篇关于js中removeEventListener取消事件监听的文章就介绍到这了,更多相关removeEventListener取消事件监听内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
