事件处理程序又叫做事件监听器,addEventListener()
和removeEventListener()
是“DOM2级事件”中定义的两个方法,分别用于添加和删除事件处理程序。所有的DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名、要为事件添加的处理程序的函数和一个表示事件处理阶段的布尔值。详见下文……
1. addEventListener()
、removeEventListener()
的用法
target.addEventListener(type, listener, useCapture):为target
对象添加事件处理程序
target
:要添加事件处理程序的对象,可以是:文档节点、document、window 或 XMLHttpRequest。
-
type
:事件名称。字符串类型,是一个不含on
的事件名,如:click
、mouseover
、keydown
等。 -
listener
:事件处理程序(事件监听器)。可以是一个实现了EventListener
接口或者是一个 JavaScript 函数字符串。 -
useCapture
:是否在捕获阶段调用事件处理程序。如果是true
,表示在捕获阶段调用事件处理程序;如果是false
,表示在冒泡阶段调用事件处理程序。在大多数情况下都应该使用false
,=将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地保持各种浏览器的兼容。
target.removeEventListener(type, listener, useCapture):移除target
对象的事件处理程序
removeEventListener()
是addEventListener()
的逆向方法,用于移除addEventListener()
方法添加的事件监听器(事件处理程序),二者有相同的参数,不在赘述。
var btn = document.getElementById("myBtn"); function handler() { alert('itbilu.com'); }; //为myBtn添加handler事件处理程序 btn.addEventListener("click", handler, false); //为myBtn添加handler事件处理程序 btn.removeEventListener("click", handler, false);
注意:addEventListener()
方法添加的匿名函数是无法移除的,所以添加时应使用函数名添加:
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert('itbilu.com'); }, false); //匿名函数无法移除 btn.removeEventListener("click", function () { alert('itbilu.com'); }, false);
2. attachEvent()
与detachEvent()
解决浏览器兼容问题
addEventListener()
和removeEventListener()
是“DOM2级事件”中定义的方法,在IE9之前的浏览器都不被支持。要在IE8等早期浏览器中添加事件监听,可以通过attachEvent()
与detachEvent()
方法实现,但要添加时要使用HTML元素的DOM属性(即:带on
的事件名,如,onclick
)添加。
var btn = document.getElementById("myBtn"); function handler() { alert('itbilu.com'); }; if(btn.addEventListener){ btn.addEventListener("click", handler) } else { btn.attachEvent("onclick", handler); } if(btn.removeEventListener){ btn.removeEventListener("click", handler) } else { btn.detachEvent("onclick", handler); }
3. DOM0
级的中的onclick
等属性与addEventListener()
添加的事件监听
使用HTML元素的DOM属性,如:onclick
等,直接在HTML节点上添加的事件为DOM0
级事件。DOM0
级事件比DOM2
级事件具有更高的优先级,会比DOM2
级事件更先执行。
<button id="myBtn" onclick="alert('itbilu.com - DOM0')">这是个按钮</button> <script type="text/javascript"> var btn = document.getElementById("myBtn"); function handler() { alert('itbilu.com - DOM2'); }; btn.addEventListener("click", handler, false); </script>
输出如下:
tbilu.com - DOM0 itbilu.com - DOM2