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. ...
随机推荐
- python-format方法记录
今天写脚本,遇到了这种情况:需要上一个脚本的回参作为一个路径参数,我用的os.path.join()处理,因为这个路径参数在最后一位,但是没有考虑到如果路径参数在中间的话,这样的拼接就只能把后面的 ...
- linux命令之df dh
df -h, --human-readable 查看磁盘空间占用情况 df -h du -h, --human-readable -s, --summarize 查看文件大小 du -h test.t ...
- 说一说Web开发中两种常用的分层架构及其对应的代码模型
昨天妹子让我帮她解决个问题,本以为可以轻松搞定,但是打开他们项目的一瞬间,我头皮发麻.本身功能不多的一个小项目,解决方案里竟然有几十个类库.仅仅搞明白各个类库的作用,代码层次之间的引用关系就花了一个多 ...
- Spring Cloud Alibaba系列(三)使用feign进行服务调用
什么是Feign Feign是spring cloud提供的一个声明式的伪http客户端,它使得调用远程服务就像调用本地服务一样简单,只需要创建一个接口并添加一天注解即可. Nacos很好的兼容了Fe ...
- Mysql常用sql语句(17)- left/right join 外连接
测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 外连接分为两种:left join.right ...
- 初级PLC
SMB2接收到一个数据即产生一次中断,必须在中断处理程序中将数据从SMB2中读出,依次填表.这是一种效率极低的通讯处理方法,通讯字节多了会影响其它程序的运行. M 是位地址.比如M0.0,M0.1等. ...
- MATLAB与三大变换
运行 Simulink 有三种方式: z 在 MATLAB 的命令窗口直接键入“Simulink”并回车: z 单击 MATLAB 工具条上的 Simulink 图标: z 在 MATLAB 菜单上选 ...
- python语法学习第九天--else和with语句
else: while/for else:正常执行完循环(非break)执行else中代码 try else:未捕捉到异常,执行else中代码 with: 语法格式: with open('666.t ...
- 封装组件el-upload通过v-model (一): 上传单张图片
ElementUI 中的el-upload 上传图片 我进行了二次封装.(默认大家都是有一定的vue基础的,细节就不过多的讲了) 在项目中我们主要拿到图片或者其他的一些参数 ,我这里是上传后返回的Gu ...
- navicat 远程链接Mysql问题
mysql服务器需要配置 给远程访问配置权限:注意自己的用户名和密码 使用select host, user, password from mysql.user;查看是否配置好相应的用户和密码 nav ...