js中 addEventListener 和removeEventListener

js中添加事件监听本来是非常常见的事情,但是去除监听一般很少去干,最近项目中需要监听页面显示或者隐藏

代码如下

 1 document.addEventListener(visibilitychange',()=>{
 2     
 3  //执行部分
 4 })
 5 
 6 
 7 //自己傻逼的以为去除事件的话直接下面这样就可以了
 8 
 9 document.removeEventListener('visibilitychange',()=>{
10    //回调函数 
11 })
12 
13 //真的一直以为事件名字对就行了,后面是回调,结果就是根本不管用
14 //网上看了介绍才知道,如果监听事件的函数是匿名函数,那么是没办法取消的,所以,一般监听事件,后面跟着的是一个具名函数,相当于,监听这件事,并且配上事件的处理函数,取消监听的时候,也需要配对,刚才的事件名和处理函数一起,取消掉
  正确的做法是:
  document.addEventListener('visibilitychange',handle)
  document.removeEventListener('visibilitychange',handle)

  function handle(){
    //处理函数了
  }
  后面还有第三个参数,用于区分是冒泡阶段还是捕获阶段,简单理解就是冒泡是从内到外,捕获是从外到内
  

 参考文章如下:https://blog.csdn.net/xiasohuai/article/details/83063293

猜你喜欢

转载自www.cnblogs.com/ysla/p/11863358.html