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. ...
随机推荐
- 有关for循环的一些东西
有的时候,不知道是因为学的有点浅显,还是脑袋有点懵,简单的循环语句都有点被绕糊涂了. 这种内外循环的,先是外循环一次,内循环全部,接着再外循环第二次,内循环全部,,,,,,,. 所以先是显示 0 4 ...
- 数据库SQL语言从入门到精通--Part 5--E-R图(实体联系图)用来描述数据库图例
数据库从入门到精通合集(超详细,学习数据库必看) E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型. ...
- CF1324D Pair of Topics
好像题解里都是树状数组(起码我翻到的是 说一种cdq分治的(这应该算是cdq分治了 用cdq比较简单,所以可以作为一个练手题 cdq分治其实是一种模糊的思想,处理\([l,r]\)区间内,有多少\(( ...
- Excel 函数 常见错误
excel公式出错的值. 常见错误值类型: #N/A #VALUE! #NAME? #REF! #NUM! #NULL! #N/A 找不到指定内容,比如查找根本不存在的内容,便显示该错误值 比如在使用 ...
- crontab自动启动小任务例子(每一分钟将当前日期打入一个文件)
crontab -l #查看当前定时任务列表 显示没有,那么我们来安装一下(必须在root用户下) – yum install vixie-cron – yum install crontabs ...
- Coursera课程笔记----计算导论与C语言基础----Week 6
理性认识C程序 导论(Week 6) 明确学习进度 讲课内容 感性➡️理性➡️函数➡️指针等 作业练习 初级阶段 ➡️正常作业练习 C语言的由来 程序设计语言的分类 低级语言之机器语言 0010101 ...
- 【华为云技术分享】MongoDB经典故障系列五:sharding集群执行sh.stopBalancer()命令被卡住怎么办?
[摘要] MongoDB sharding集群执行sh.stopBalancer()命令时被卡住怎么办?别慌,华为云数据库来给您支招,收下这份方案指南,让您分分钟远离被自建MongoDB数据库支配的恐 ...
- 出现Please make sure you have the correct access rights and the repository exists.问题解决
问题: 有一段时间没有用码云了,当输入 git push -u origin master命令出现Please make sure you have the correct access rights ...
- Java--ArrayList的遍历
三种遍历方式 一.for循环 二.for each 三.Iterator器遍历 Iterator it = list.iterator(); while(it.hasNext()){ syso(it. ...
- [coj 1353 Guessing the Number]kmp,字符串最小表示法
题意:给一个字符串,求它的最小子串,使得原串是通过它重复得到的字符串的一个子串. 思路:先求最小长度,最小循环长度可以利用kmp的next数组快速得到,求出长度后然后利用字符串最小表示法求循环节的最小 ...