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

Posted 小丸子的城堡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件处理程序DOM0,DOM2,IE的区别总结相关的知识,希望对你有一定的参考价值。

一、事件流

  顺序 备注
事件冒泡 目标对象~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的区别总结的主要内容,如果未能解决你的问题,请参考以下文章

Dom0级 Dom2级区别

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

20190226JavaScript-知识点记录:dom0级事件,dom2级事件

事件处理

js事件处理程序详解,html事件处理程序,dom0级事件处理程序,dom2级事件处理程序

JavaScript中的事件