js中 addEventListener 和removeEventListener
js中添加事件监听本来是非常常见的事情,但是去除监听一般很少去干,最近项目中需要监听页面显示或者隐藏
代码如下
document.addEventListener(visibilitychange',()=>{
//执行部分
})
//自己傻逼的以为去除事件的话直接下面这样就可以了
document.removeEventListener('visibilitychange',()=>{
//回调函数
})
//真的一直以为事件名字对就行了,后面是回调,结果就是根本不管用
//网上看了介绍才知道,如果监听事件的函数是匿名函数,那么是没办法取消的,所以,一般监听事件,后面跟着的是一个具名函数,相当于,监听这件事,并且配上事件的处理函数,取消监听的时候,也需要配对,刚才的事件名和处理函数一起,取消掉
正确的做法是:
document.addEventListener('visibilitychange',handle)
document.removeEventListener('visibilitychange',handle)
function handle(){
//处理函数了
}
后面还有第三个参数,用于区分是冒泡阶段还是捕获阶段,简单理解就是冒泡是从内到外,捕获是从外到内
参考文章如下:https://blog.csdn.net/xiasohuai/article/details/83063293
js中 addEventListener 和removeEventListener的更多相关文章
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- js中addEventListener中第3个参数
addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id=& ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- jquery中的each用法以及js中的each方法实现实例
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
- 看懂此文,不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
随机推荐
- OpenCV的安装和使用
@ windows系统 (环境:VS2013) 下载安装opencv.exe: VS2013下“项目”->“属性页”->“配置属性”-> “VC++目录”: 包含目录 - ..\op ...
- ACM算法--枚举方法(指数枚举,组合枚举)模板
// 递归实现指数型枚举 vector<int> chosen; void calc(int x) { if (x == n + 1) { for (int i = 0; i < c ...
- 程序员最喜欢用的在线IDE代码编译器,什么?你竟然不知道!
1.网址https://tech.io/snippet 支持 20+ 种编程语言,页面上没有杂七杂八的东西,非常简约,非常干净,另外,它上面的代码段还可以嵌入到网页之中. 2.网址 https://w ...
- vue 比 js的强大
//js写留言板 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- 【Kafka】Kafka简单介绍
目录 基本介绍 概述 优点 主要应用场景 Kafka的架构 四大核心API 架构内部细节 基本介绍 概述 Kafka官网网站:http://kafka.apache.org/ Kafka是由Apach ...
- vue-cli3.0读取外部化配置文件来修改公共路径
之前我写过一篇通过nginx配置代理转发的博客,正常来说也是正确的,但不足之处在了甲方还用了F5负载均衡和gateway来代理转发.所以之前我认为的请求->nginx转发代理->后端服务, ...
- python语法学习第十一天--模块
容器----------->数据的封装 函数----------->语句的封装 类-------------->方法和属性的封装 模块----------->程序本身 导入: ...
- [coj 1353 Guessing the Number]kmp,字符串最小表示法
题意:给一个字符串,求它的最小子串,使得原串是通过它重复得到的字符串的一个子串. 思路:先求最小长度,最小循环长度可以利用kmp的next数组快速得到,求出长度后然后利用字符串最小表示法求循环节的最小 ...
- [hdoj5192] 树状数组
枚举所有的区间.对于确定的区间,假设最终的高度为h, 代价是max(∑(Hi−h),∑(h−Hj))(Hi>h,Hj≤h) 等价于max(∑Hi−cnt(i)∗h,cnt(j)∗h−∑Hj) ( ...
- windows电脑关闭自动更新的方法
第一步.打开我的电脑,点击此电脑,然后点击管理 第二步.在计算机管理(本地)里面找到服务和应用程序,点击进入 第三步.进去,点击服务 第四步.往下滑,找到windows update,点击进入 第五步 ...