DOM2下addEventListener与IE下attachEvent的区别

一、三种事件绑定的介绍

　　1. DOM0 事件处理程序的传统方式 

　　　　1.1 绑定方法

　　　　　　将处理函数赋值给元素(包括window和document)的事件处理程序属性

　　　　　　eg.

var btn = document.getElementById("btn1");

btn.onclick = function() {

　　alert("button clicked");  

}

　　　　1.2 作用域

　　　　　　在元素的作用域中运行。即this引用当前元素。

　　　　1.3 处理阶段

　　　　　　在bubble阶段运行。

　　　　1.4 移除事件处理程序

　　　　　　btn.onclick = null;

 

　　1. DOM2  addEventListener

　　　　2.1 参数

　　　　　　element.addEventListener(type, handler, phase);

　　　　　　type: 事件类型，如"click", "blur"...

　　　　　　handler: 事件处理程序

　　　　　　phase: true/false, true表示在捕获阶段执行，false表示在冒泡阶段执行

　　　　2.2 作用域

　　　　　　在元素的作用域中运行。即this引用当前元素。

　　　　2.3 事件处理程序执行顺序

　　　　　　按照绑定顺序触发

var btn = document.getElementById("btn1");

btn.addEventListener("clicked", function() {

　　alert("handler1");

}, false);

btn.addEventListener("clicked", function() {

　　alert("handler!");

}, false);

　　　　　　首先显示handler1，再显示handler2

　　　　2.4 移除事件处理函数

　　　　　　element.removeEventListener(type, handler, phase);

　　　　　　参数必须与addEventListener的参数一样。注意：handler不可以是匿名函数

　　3. IE下attachEvent

　　　　3.1 参数

　　　　　　element.attachEvent(type, handler)

　　　　　　type: "on" + 事件类型，如"onclick", "onblur"

　　　　　　handler: 事件处理函数的引用

　　　　3.2 作用域

　　　　　　全局作用域。this指针为window。

　　　　3.3 事件处理程序执行顺序

　　　　　　与添加事件处理程序时的顺序相反。

　　　　3.4 处理程序执行阶段

　　　　　　冒泡阶段

　　　　3.5 移除事件处理程序

　　　　　　element.detachEvent(type, handler);

　　　　　　参数必须与attachEvent的参数一样。注意：handler不可以是匿名函数

 

二、addEventListener与attachEvent的区别

　　1. 支持的浏览器

　　　　addEventListener在支持DOM2的浏览器中使用，如FF, Chrome等

　　　　attachEvent为IE所用

　　2. 处理程序执行阶段

　　　　addEventListener的第三个参数为true时，在捕获阶段执行，为false时，在冒泡阶段执行

　　　　attachEvent的均在冒泡阶段执行

　　3. 作用域

　　　　addEventListener的作用域为元素作用域，this为element的引用

　　　　addEvent的为全局作用域，this为window的引用

　　4. 事件处理程序执行顺序

　　　　addEventHander：执行顺序与添加顺序一致

　　　　attachEvent：执行顺序与添加顺序相反