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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
项目实践之javascript技巧
Dec 06 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
对python中list的五种查找方法说明
2020/07/13 Python
Django xadmin安装及使用详解
2020/10/26 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
html5实现滑块功能之type="range"属性
2020/02/18 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
初中历史教学反思
2016/02/19 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技