DOM2级事件绑定详解：标准实现与IE兼容处理

DOM2事件绑定原理与DOM0对比

现代前端开发中常用的DOM2事件绑定，其底层原理是利用原型链查找机制，使元素实例能够访问到EventTarget内置类原型上定义的addEventListener方法。

相比之下，DOM0级事件绑定存在明显局限：同一元素的特定行为只能绑定一个处理函数，后续再次绑定会直接覆盖之前的设置。

DOM2级规范突破了这一限制，允许为同一元素的同一行为注册多个不同的处理函数。

box.addEventListener('click',function(e){
      console.log(1)
    },false)
    box.addEventListener('click',function(e){
      console.log(2)
    },false) // 输出1 2

DOM2不仅兼容DOM0中定义的行为类型，还引入了如DOMContentLoaded这样DOM0所不具备的新行为类型。该事件在页面DOM结构（HTML标签解析完成）加载完毕后触发。

box.addEventListener('DOMContentLoaded',function(e){
      
    },false)

window.onload = function(){}

//当页面中的所有资源都加载完成（图片、HTML结构、音视频...）才会执行后面的函数；并且在一个页面中只能用一次，后面在写会把前面的覆盖掉；->因为他是采用DOM0事件绑定，所以只能绑定一次
    　$(document).ready(function(){})//->$(function(){})
    /*
      只要页面中的HTML结构加载完成就会执行对应的函数；并且在同一个页面中可以出现多次。因此这个是采用DOM2事件的绑定，绑定的行为是DOMContentLoaded
    */

DOM2事件添加与移除细节

在DOM2级事件中，添加和移除事件监听器有具体的操作细节需要注意。

function fn1(e){
      console.log(this);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    //移除事件
    box.removeEventListener('click',fn1,false);

移除事件监听时，必须确保传入的三个参数——事件类型、处理函数引用以及捕获/冒泡阶段标识——与绑定时完全一致。因此，在DOM2绑定中，通常建议使用具名函数而非匿名函数，以便后续移除。

虽然DOM2允许绑定多个方法，但如果尝试绑定完全相同的方法引用，浏览器机制会去重，最终只保留一个执行实例。

当事件触发时，绑定的处理函数会严格按照注册顺序依次执行。在函数内部，this关键字指向当前触发事件的那个DOM元素本身。

function fn1(){
      console.log(1);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    box.addEventListener('click',fn1,false);//只输出一个1

上述机制依赖于浏览器内部的一个概念：事件池。该池用于存储当前元素上绑定的所有处理函数，这是浏览器自带的底层机制，具体结构可参考相关图示。

IE6-8浏览器兼容方案

然而，在IE6至IE8等老旧浏览器中，并不支持标准的addEventListener方法。若需实现类似DOM2的事件绑定效果，必须使用IE特有的attachEvent和detachEvent方法。

IE的attachEvent仅接受两个参数，无法像标准方法那样精确控制事件触发的阶段（捕获或冒泡），默认仅在冒泡阶段触发。此外，事件类型名称前需加上“on”前缀，这与DOM0的写法较为相似。

box.attachEvent('onclick',fn1)

将IE的机制与标准浏览器的事件池进行对比，可以发现几个关键差异。

首先是执行顺序：标准浏览器严格遵循绑定的先后顺序执行，而IE6-8中的执行顺序是不确定的、混乱的。

其次是重复绑定处理：在IE6-8中，允许给同一元素的同一行为绑定多个完全相同的方法，且不会像标准浏览器那样去重。

最后是this指向问题：在IE6-8中执行绑定的方法时，方法内部的this并不指向当前元素（如box），而是指向全局window对象。

以上内容涵盖了DOM2级事件绑定的核心知识点及兼容性处理，希望能为读者的学习提供有益参考，欢迎继续支持本站获取更多技术分享。