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 相关文章推荐
基于jquery的固定表头和列头的代码
May 03 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
node.js基础知识汇总
Aug 25 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
WebPack工具运行原理及入门教程
Dec 02 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代码实现爬虫记录――超管用
2015/07/31 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
JS删除数组元素的函数介绍
2013/03/27 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
json的使用小结
2016/06/08 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Vue 使用中的小技巧
2018/04/26 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
react 生命周期实例分析
2020/05/18 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python实现梯度下降法
2020/03/24 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
师德个人剖析材料
2014/02/02 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
个人授权委托书范本
2014/09/14 职场文书
信访维稳承诺书
2015/05/04 职场文书
运动会主持人开幕词
2016/03/04 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python