关于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实现数组随机排序的三种方法详解

    这篇文章主要为大家详细介绍了JavaScript中实现数组随机排序的三种方式,文中的示例代码讲解详细,对我们学习或工作有一定参考价值,需要的可以参考一下
    2022-05-05
  • javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏

    本文很简单,给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码,算是对自己学习javascript的一次小小的总结,代码参考了网友的部分内容,推荐给大家,希望对大家能够有所帮助。
    2015-03-03
  • 原生js实现trigger方法示例代码

    原生js实现trigger方法示例代码

    这篇文章主要给大家介绍了关于利用原生js实现trigger方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • layui的layer.confirm如何获取按钮焦点

    layui的layer.confirm如何获取按钮焦点

    因为ayer.confirm的按钮并非采用button,而是a标签,所以获取按钮焦点获取不到,要采用别的方法,下面介绍在ie11中和ie8中不同的写法,对layui layer.confirm获取按钮焦点相关知识感兴趣的朋友一起看看吧
    2023-11-11
  • JS实现局部选择打印和局部不选择打印

    JS实现局部选择打印和局部不选择打印

    这篇文章主要介绍了JS选择打印内容,主要是把自己要打印的东西用一个DIV层抱起来,需要的朋友可以参考下
    2014-04-04
  • Javascript操纵Cookie实现购物车程序

    Javascript操纵Cookie实现购物车程序

    Javascript操纵Cookie实现购物车程序...
    2007-02-02
  • Javascript Object对象类型使用详解

    Javascript Object对象类型使用详解

    面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟,这篇文章主要介绍了Javascript Object对象类型使用详解
    2022-10-10
  • IE8 chrome中table隔行换色解决办法

    IE8 chrome中table隔行换色解决办法

    今天把项目生成好后,发布到万维网上进行测试,发现table的隔行换色在IE8,chorem中不能正常显示。找了许多资料,CSS看样是不能解决,只能用JS来控制了
    2010-07-07
  • JavaScript数据类型转换详解(推荐)

    JavaScript数据类型转换详解(推荐)

    众所周知JavaScript是一门弱类型(语言,即变量的类型是不确定的。所以下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
    2021-05-05
  • 用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

    用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

    用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数 函数的参数:elem元素、页面主体宽度(如:990、950宽)、elem与页面主体DIV的左边距
    2012-01-01

最新评论