JS事件绑定详解：addEventListener与attachEvent兼容性及冒泡捕获原理

JavaScript事件绑定概述

本文深入探讨JavaScript中的事件绑定机制，提供详细的分析与实用参考。

兼容性与事件阶段原理

在早期IE浏览器中，事件绑定依赖于obj.attachEvent()方法，而现代标准浏览器则采用addEventListener()。这两个API均接收三个参数：事件类型、处理函数以及一个布尔值，用于指定事件触发的阶段。该布尔值为true时代表在捕获阶段执行，为false时代表在冒泡阶段执行。鉴于IE仅支持冒泡机制，为确保最大范围的浏览器兼容性，通常建议将事件处理程序绑定至冒泡阶段（即默认值false）。除非有特定需求需要在事件到达目标节点前进行拦截，否则不建议在捕获阶段注册处理程序。以下是兼容各主流浏览器的事件绑定实现方案。

跨浏览器事件绑定实现


 function addEvent(obj, eventType, callback, bubble){
 if(obj.addEventListener){
  obj.addEventListener(eventType, callback, bubble);
 }else{
  obj.attachEvent(eventType, callback, bubble);
 }
 }

调用注意事项

在调用封装好的事件绑定函数时，需注意传入的callback参数不应包含括号，这与setTimeout等异步函数的调用方式类似。

前几个参数的使用较为直观，但最后一个布尔参数的具体行为往往令人困惑。建议通过实际代码测试来彻底厘清其工作原理。

测试环境构建与案例分析

以下HTML结构用于后续测试：


<!doctype html>
<html lang="en">
  <head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="">
    <title>Document</title>
  <!--css js 文件的引入-->
  </head>
  <body>
    <div id="out"> 
    <p>我是路人甲</p>
    <div id="middle"> 
      <div id="inner">最里面的</div> 
    </div> 
    <p>我是路人乙</p>
    </div>
  </body>
</html>

全冒泡模式测试

第一种情况：所有层级均设置为冒泡阶段（false）。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

全捕获模式测试

第二种情况：所有层级均设置为捕获阶段（true）。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

混合模式测试

第三种情况：外层与内层为捕获，中层为冒泡。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

第四种情况：外层与中层为捕获，内层为冒泡。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

第五种情况：外层与中层为捕获，内层为冒泡（注：此处原文逻辑可能指代不同组合，依据代码实际执行结果为准）。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

第六种情况：其他组合配置。


<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

结果分析与总结

通过上述六种情况的对比结果，可以清晰地观察到第三个参数为true或false时，事件触发顺序的根本区别。

深入理解JavaScript事件绑定与冒泡捕获机制