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的事件名,如:clickmouseoverkeydown等。
  • 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