addEventListener、removeEventListener与事件处理程序

 2015年09月22日    2911     声明


事件处理程序又叫做事件监听器，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