js中 addEventListener 和removeEventListener

Posted 2020-11-23 yang_nick

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