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 delete 属性的使用
Oct 08 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
keep-alive保持组件状态的方法
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部分常见问题总结
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP入门学习笔记之一
2010/10/12 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
大学生求职简历的自我评价范文
2013/10/12 职场文书
交通安全演讲稿
2014/01/07 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
大学军训感言300字
2014/03/09 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书