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

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监听事件的叠加和移除，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Node.js net模块功能及事件监听用法分析

    Node.js net模块功能及事件监听用法分析

    本文实例讲述了Node.js net模块功能及事件监听用法.分享给大家供大家参考,具体如下: net模块 对比C语言的网络编程,Node.js有更加简便的开发模式与模块提供.它就是net模块 在需要使用的时候只需要require("net")就可以引入模块了. var net = require("net"); 服务端编程 引入模块的前提下: 1. 创建一个新的TCP或IPC服务 var server = net.createServer(function(clie

  • Javascript中绑定click事件的四种方式介绍

    一:HTML中添加onclick <button id="vv" onclick="myfunction()" >哈哈</button> 二:JS中定义函数绑定事件! var funcc = function () { alert('我爱编程') } var aa = document.getElementById('vv') aa.onclick = funcc 三:直接定义函数与内容 document.getElementById('vv

  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性:event = event || window.event 事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变): event.target(点击的目标对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • Node.js EventEmmitter事件监听器用法实例分析

    本文实例讲述了Node.js EventEmmitter事件监听器用法.分享给大家供大家参考,具体如下: Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. events 模块只提供了一个对象: events.EventEmitter.EventEmitter 的核心就是事件触发与事件监听器功能的封装. 该模块已被node.js默认引,不需要使用require()显示引入. EventEmitter 对象如果在实例化时发生错误,会触发 'error' 事件.当添加新的监

  • JavaScript常见鼠标事件与用法分析

    JavaScript常见鼠标事件与用法分析

    本文实例讲述了JavaScript常见鼠标事件与用法.分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下. mouseup 鼠标的键钮释放弹起. click 鼠标左键(或中键)被单击. 事件触发顺序是:mousedown -> mouseup -> click dblclick 鼠标左键(或中键)被双击. 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->

  • JavaScript常用事件介绍

    JavaScript常用事件介绍

    JavaScript 事件(常用) 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件.比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数.事件在HTML 页面中定义. 事件举例: 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意:事件通常与函数配合使用,当事件发生时函数才会执行. 事件三要素 事件源.事件.事件驱动程序. 三句话:获取事件源.绑定事件.书写事件驱动程序. 1.获取事件源:docu

  • 浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

  • JavaScript事件对象深入详解

    本文实例讲述了JavaScript事件对象.分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素.事件的类型以及其他与特定事件相关的信息.所有的浏览器都支持 event 对象,但支持的方式不同. 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序(DOM0 级与 DOM2 级都支持): var btn = document.getElementById("myBtn&quo

  • javascript中的event loop事件循环详解

    前言 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是

  • JavaScript键盘事件常见用法实例分析

    JavaScript键盘事件常见用法实例分析

    本文实例讲述了JavaScript键盘事件常见用法.分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键. keyup 键盘按键弹起,可以捕获组合键. 全局事件对象event event.ctrlKey 功能键"ctrl"键是否按下. event.altKey 功能键&qu

随机推荐