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 相关文章推荐
JS获取并操作iframe中元素的方法
Mar 21 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
Javascript之Math对象详解
Jun 07 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
详解组件库的webpack构建速度优化
Jun 18 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue之延时刷新实例
Nov 14 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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/12/22 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
索趣科技的答案
2007/02/07 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
node.js中watch机制详解
2014/11/17 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python实现人脸识别代码
2017/11/08 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
房地产开发计划书
2014/01/10 职场文书
离婚案件被告代理词
2015/05/23 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL