首页 > 代码库 > 事件处理程序DOM0，DOM2，IE的区别总结

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

2024-09-04 04:15:34   219人阅读

一、事件流

  顺序 备注
事件冒泡 目标对象~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);
});

注意：同上；

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


联系
我们