关于js中removeEventListener取消事件监听的坑

 更新时间:2022年09月01日 14:27:21   作者:huangfengnt  
许多入前端不久的人都会遇到removeEventListener无法清除监听的情况,下面这篇文章主要给大家介绍了关于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取消事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS一级数组和数组对象合并去重方法实例

    JS一级数组和数组对象合并去重方法实例

    这篇文章主要为大家介绍了JS一级数组和数组对象合并去重方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • js实现简单图片拖拽效果

    js实现简单图片拖拽效果

    这篇文章主要为大家详细介绍了js实现简单图片拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • webapi根据id获取元素的实现思路

    webapi根据id获取元素的实现思路

    掌握document.getElementById() 根据id获取元素,在页面画出一个宽200 高200 粉色的盒子, 在控制台打印这个盒子,接到这样的需求如何处理呢,下面小编给大家分享webapi根据id获取元素的实现思路,感兴趣的朋友一起看看吧
    2024-02-02
  • Javascript实现信息滚动效果

    Javascript实现信息滚动效果

    这篇文章主要为大家详细介绍了Javascript实现信息滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 一个收集图片的bookmarlet(js 刷新页面中的图片)

    一个收集图片的bookmarlet(js 刷新页面中的图片)

    这个代码是用来在新的页面内显示当前页面内的所有图片的。
    2010-05-05
  • 关于js new Date() 出现NaN 的分析

    关于js new Date() 出现NaN 的分析

    在一个项目中需要进行日期的格式化,后台传到前端是时间的整数(Date.getTime),当后台数据返回字符串时,发现转换日期时在ie下变成NaN,但是真的是这样吗?接下来我们慢慢分析
    2012-10-10
  • 不会死机的js 格式代码

    不会死机的js 格式代码

    别人写的 js 格式代码,说是不会死机,可以格式超长代码.
    2008-05-05
  • JavaScript控制table某列不显示的方法

    JavaScript控制table某列不显示的方法

    这篇文章主要介绍了JavaScript控制table某列不显示的方法,涉及javascript操作表单的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • js实现获取焦点后光标在字符串后

    js实现获取焦点后光标在字符串后

    这篇文章主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看
    2014-09-09
  • javaScript实现支付10秒倒计时

    javaScript实现支付10秒倒计时

    这篇文章主要为大家详细介绍了javaScript实现支付10秒倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论