JS监听事件的叠加和移除功能


Posted in Javascript onNovember 19, 2018

html DOM元素有很多on开头的监听事件,如onload、onclick等,见DOM事件列表。但是同一种事件,后面注册的会覆盖前面的:

window.onresize = function(){
  alert(1);
}
window.onresize = function(){
  alert(2);
}
// 改变窗口大小时,只会弹出2

addEventListener监听

利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖:

window.addEventListener("resize",function(){
  alert(1)
})
window.addEventListener("resize",function(){
  alert(2)
})
// 改变窗口大小时,先后弹出1和2

注意这里面的事件是不带"on"前缀的。

removeEventListener移除监听

removeEventListener跟addEventListener相对应,用于移除事件监听。

如果要移除事件句柄,addEventListener() 的执行函数必须使用外部具名函数,匿名函数事件是无法移除的。

// 匿名函数事件无法移除
window.addEventListener("resize",function(){
  alert(1)
})
// 监听具名函数事件
function myResize(){
  alert(2)
}
window.addEventListener("resize",myResize)
// 移除事件监听
window.removeEventListener("resize",myResize)

总结

以上所述是小编给大家介绍的JS监听事件的叠加和移除,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
jquery validate demo 基础
Oct 29 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 #Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 #Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 #Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
You might like
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
js实现简单模态框实例
2018/11/16 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python中使用动态变量名的方法
2014/05/06 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python 除法保留两位小数点的方法
2018/07/16 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python selenium操作cookie的实现
2020/03/18 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
人与自然的观后感
2015/06/18 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
创业计划书之美容店
2019/09/16 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android