JS removeEventListener()和detachEvent()方法:销毁事件
在 JavaScript 中的 DOM 事件模型中,使用 removeEventListener() 方法可以从指定对象中删除已经注册的事件处理函数。用法如下:
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>
演示效果如下图所示:
发表评论