事件处理程序DOM0，DOM2，IE的区别总结

Posted 2020-08-31 小丸子的城堡

一、事件流

	顺序	备注
事件冒泡	目标对象~document对象
事件捕获	document对象~目标对象	老版本浏览器不支持
DOM事件流	document对象~目标对象~document对象	IE8-不支持

二、事件处理程序

（1）html事件处理程序（略）

（2）DOM0事件处理程序

• 在元素作用域中运行（this=调用元素）

var btn=document.getElementById("mybtn");
btn.onclick=function(){
　　alert(this.id);//mybtn
}

• 在冒泡阶段被处理
• 对每个元素值支持一个事件处理程序

• 删除方式

btn.onclick=null;

（3）DOM2事件处理程序

• 在元素作用域中运行（this=调用元素）

var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
　　alert(this.id);//mybtn
},false);

• 采用DOM事件流，可在捕获阶段和冒泡阶段处理

第三个参数为false，表示在冒泡阶段处理事件；参数为true，表示在捕获阶段处理事件。

默认值为false，最大限度兼容各浏览器。（因为老版本只支持冒泡事件）

• 对每个元素值支持多个事件处理程序（主要好处），执行顺序为添加顺序；
• 删除方式（与添加事件的参数完全相同）

方式：removeEventListener()

btn.removeEventListener("click",function(){//无效
　　alert(this.id);//mybtn
},false);

注意：通过addEventListener()添加的匿名函数将无法移除。即上一段代码中的匿名函数移除不了，因为addEventListener()中的匿名函数与removeEventListener()中的匿名函数是完全不同的函数。所以，应将匿名函数表示为一个变量，如下：

var handler=function(){
     alert(this.id);          
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);

（4）IE事件处理程序

• 在全局作用域中运行（this=window）

var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
　　alert(this===window);//true
});

• 在冒泡阶段处理

第三个参数为false，表示在冒泡阶段处理事件；参数为true，表示在捕获阶段处理事件。

默认值为false，最大限度兼容各浏览器。（因为老版本只支持冒泡事件）

• 对每个元素支持多个事件处理程序，执行顺序为相反于添加顺序。
• 删除方式（与添加事件的参数完全相同）

方式：detachEvent()

btn.detachEvent("onclick",function(){//无效
　　alert(this===window);
});

注意：同上；