首页 > 编程笔记 > JavaScript笔记
阅读:18
JS removeEventListener()和detachEvent()方法:销毁事件
在 JavaScript 中的 DOM 事件模型中,使用 removeEventListener() 方法可以从指定对象中删除已经注册的事件处理函数。用法如下:
removeEventListener() 方法只能删除 addEventListener() 方法注册的事件。如果使用 onclick 等直接卸载元素上的事件,将无法使用 removeEventListener() 方法删除。
当临时注册一个事件时,可以在处理完毕之后迅速删除它,这样能够节省系统资源。
IE 事件模型使用 detachEvent() 方法注销事件。用法如下:
由于 IE 怪异模式不支持 DOM 事件模型,为了保证页面的兼容性,开发时需要兼容两种事件模型,以实现在不同浏览器中具有相同的交互行为。
element.removeEventListener(String type, Function listener, boolean useCaptrue);
参数说明如下:- type:注册事件的类型名。事件类型与事件属性不同,事件类型名没有 on 前缀。例如,对于事件属性 onclick 来说,所对应的事件类型为 click。
- listener:监听函数,即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时,默认传递给它的唯一参数是 event 对象。
- useCaptrue:是一个布尔值。如果为 true,则指定的事件处理函数将在事件传播的捕获阶段触发;如果为 false,则事件处理函数将在冒泡阶段触发。
示例1
在下面示例中,分别为按钮 a 和按钮 b 注册 click 事件,其中按钮 a 的事件函数为 ok(),按钮 b 的事件函数为 delete_event()。在浏览器中预览,当单击“点我”按钮将弹出一个对话框,在不删除之前这个事件时一直存在的。当单击“删除事件”按钮之后,“点我”按钮将失去任何效果。<input id="a" type="button" value="点我" /> <input id="b" type="button" value="删除事件" /> <script> var a = document.getElementById("a"); //获取按钮a var b = document.getElementById("b"); //获取按钮b function ok(){ //按钮a的事件处理函数 alert("您好,欢迎光临!"); } function delete_event(){ //按钮b的事件处理函数 a.removeEventListener("click",ok,false); //移出按钮a的click事件 } a.addEventListener("click",ok,false); //默认为按钮a注册事件 b.addEventListener("click",delete_event,false); //默认为按钮b注册事件 </script>演示效果如下图所示:
removeEventListener() 方法只能删除 addEventListener() 方法注册的事件。如果使用 onclick 等直接卸载元素上的事件,将无法使用 removeEventListener() 方法删除。
当临时注册一个事件时,可以在处理完毕之后迅速删除它,这样能够节省系统资源。
IE 事件模型使用 detachEvent() 方法注销事件。用法如下:
element.detachEvent(etype, eventName)
参数说明如下:- etype:设置事件类型,如 onclick、onkeyup、onmousemove 等。
- eventName:设置时间名称,也就是事件处理函数。
由于 IE 怪异模式不支持 DOM 事件模型,为了保证页面的兼容性,开发时需要兼容两种事件模型,以实现在不同浏览器中具有相同的交互行为。
示例2
下面示例设计段落标签 <p> 仅响应一次光标经过行为。当第 2 个光标经过段落文本时所注册的事件不再有效。<p id="p1">IE 事件注册</p> <script> var p1 = document.getElementById("p1"); //捕获段落元素 var f1 = function () { //定义事件处理函数1 p1.style.background = 'blue'; }; var f2 = function () { //定义事件处理函数2 p1.style.background = 'red'; p1.detachEvent("onmouseover", f1); //当触发mouseout事件后,注销mouseover事件 p1.detachEvent("onmouseout", f2); //当触发mouseout事件后,注销mouseout事件 }; p1.attachEvent("onmouseover", f1); //注册mouseover事件 p1.attachEvent("onmouseout", f2); //注册mouseout事件 </script>
示例3
为了能够兼容 IE 事件模型和 DOM 事件模型,下面示例使用 if 语句判断当前浏览器支持的事件处理模型,然后分别使用 DOM 注册方法和 IE 注册方法为段落文本注册 mouseover 和 mouseout 两个事件。当触发 mouseout 事件之后,再把 mouseover 和 mouseout 事件注销掉。<p id="p1">IE 事件注册</p> <script> var p1 = document.getElementById("p1"); //捕获段落元素 var f1 = function () { //定义事件处理函数1 p1.style.background = 'blue'; }; var f2 = function () { //定义事件处理函数2 p1.style.background = 'red'; if (p1.detachEvent) { //兼容IE事件模型 p1.detachEvent("onmouseover", f1); //注销事件mouseover p1.detachEvent("onmouseout", f2); //注销事件mouseout } else { //兼容DOM事件模型 p1.removeEventListener("mouseover", f1); //注销事件mouseover p1.removeEventListener("mouseout", f2); //注销事件mouseout } }; if (p1.attachEvent) { p1.attachEvent("onmouseover", f1); p1.attachEvent("onmouseout", f2); } else { p1.addEventListener("mouseover", f1); p1.addEventListener("mouseout", f2); } </script>
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频