JavaScript事件冒泡与事件捕获机制详解

作者：交互手记时间：2026-10-22 16:26:45浏览：299

本文深入解析JavaScript中的事件冒泡与事件捕获机制，通过实例演示事件在不同DOM节点间的传递顺序。文章详细说明了如何区分和设置这两种模式，提供了跨浏览器阻止事件冒泡的兼容代码，并对比了IE与非IE浏览器在事件处理API上的差异，帮助开发者掌握事件流控制。

本文通过具体实例解析JavaScript中的事件冒泡与事件捕获机制，供读者参考学习。

事件冒泡机制

1、事件冒泡

当在某个对象上触发特定事件（如onclick事件）时，该事件会沿着DOM树向上传播，依次触发其所有祖先节点上的同名事件。


<body onclick="alert('body')">
  <div onclick="alert('div')">
    <a href="" onclick=" rel="external nofollow" alert('a')">事件冒泡</a>
  </div>
</body>

执行上述代码后，控制台或弹窗将依次显示：a、div、body。

需要注意的是，并非所有事件都会发生冒泡现象。blur、focus、load、unload等事件类型默认不冒泡。

阻止事件冒泡的方法

2、阻止事件冒泡

如果希望事件仅在当前子元素上处理，而不向上传播至祖先元素，则需要采取措施阻止事件冒泡。

不同浏览器实现阻止冒泡的方式存在差异：


function stopBubble(e){
  if(e && e.stopPropagation)
    e.stopPropagation(); // 非IE浏览器
  else
    window.event.cancelBubble = true; // IE浏览器
}


<div>
  <a href="">事件冒泡</a>
</div>
<script>
  function stopBubble(e){
    if(e && e.stopPropagation)
      e.stopPropagation(); // 非IE浏览器
    else
      window.event.cancelBubble = true; // IE浏览器
  }
  document.getElementsByTagName("body")[0].onclick = function(e) {
    stopBubble(e);
    alert('body');
  }
  document.getElementsByTagName("div")[0].onclick = function(e) {
    stopBubble(e);
    alert('div');
  }
  document.getElementsByTagName("a")[0].onclick = function(e) {
    stopBubble(e);
    alert('a');
  }
</script>

运行上述代码后，仅会输出：a。

事件捕获与冒泡的区别

3、事件冒泡与事件捕获

事件捕获阶段：事件从document对象开始向下传播，直至到达真正触发事件的目标元素（target）。

事件冒泡阶段：事件从目标元素（target）开始，向上传播直至document对象。

传统的element.onclick = doSomething事件绑定方式，通常默认采用事件冒泡机制。


<div>
  <p>传统的事件冒泡</p>
</div>
<script>
  document.getElementsByTagName("p")[0].onclick = function(e) {
    alert('p');
  };
  document.getElementsByTagName("div")[0].onclick = function(e) {
    alert('div');
  };
</script>

运行该示例代码，依次输出：p、div。

在绑定事件时，开发者可以选择使用事件捕获或事件冒泡。通过addEventListener函数进行绑定时，其第三个参数用于指定模式：若为true，则采用事件捕获；若为false，则采用事件冒泡，例如element.addEventListener('click', doSomething, true)。


<div>
  <p>设置的事件冒泡</p>
</div>
<script>
  document.getElementsByTagName("p")[0].addEventListener('click', function(e) {
    alert('p');
  }, false);
  document.getElementsByTagName("div")[0].addEventListener('click', function(e) {
    alert('div');
  }, false);
</script>

当第三个参数设为false（冒泡）时，依次输出：p、div。


<div>
  <p>设置的事件捕获</p>
</div>
<script>
  document.getElementsByTagName("p")[0].addEventListener('click', function(e) {
    alert('p');
  }, true);
  document.getElementsByTagName("div")[0].addEventListener('click', function(e) {
    alert('div');
  }, true);
</script>

当第三个参数设为true（捕获）时，依次输出：div、p。

注意：Chrome和Firefox浏览器均支持事件捕获和事件冒泡。然而，IE浏览器仅支持事件冒泡，不支持事件捕获，也不提供addEventListener函数。IE提供了替代函数attachEvent，使用方式如ele.attachEvent("onclick", doSomething)。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章

JS怎么实现页面强制刷新

2026-11-05 14:53:38

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

2026-11-05 12:12:23

怎么封装一个通用的JS创建元素辅助函数

2026-11-05 11:41:41

Swiper.js 怎么监听滑动结束并获取当前索引

2026-11-05 10:57:15

HTML、CSS和JS的关系：Web前端三件套怎么协作

2026-11-04 15:41:40