JavaScript事件捕获与冒泡机制及阻止方法详解

JavaScript事件捕获与冒泡机制及阻止方法详解

本文通过具体实例解析JavaScript中的事件捕获与冒泡机制，并提供相关代码参考。

近期项目出现异常，经排查发现与事件冒泡有关。借此机会，本文深入探讨如何利用JavaScript处理事件的捕获与冒泡。

理解事件捕获与冒泡的概念

一、理解事件捕获与冒泡的概念

事件冒泡是指：当在某个对象上触发特定事件（如单击onclick）时，若该对象定义了事件处理程序，则执行该程序；若未定义或处理程序返回true，事件将向父级对象传播，由内向外直至被处理或到达文档层（document，部分浏览器为window）。

简而言之，事件冒泡是从后代节点向祖先节点传播的过程，而事件捕获则是从祖先节点向后代节点传播。

为便于记忆，可理解为“先捕获，后冒泡”：捕获是从上至下，冒泡是从下至上。有人将捕获比作石头沉入海底，冒泡比作气泡浮出水面。捕获的深度取决于DOM结构的层级。

需注意：IE6、IE7和IE8仅支持冒泡流，不支持捕获流。

为何需要阻止事件冒泡

二、为何需要阻止事件冒泡

读者可能会疑惑：阻止事件冒泡有何实际用途？

以下通过具体场景说明阻止冒泡的必要性。

参考以下HTML结构示例：

<html>
  <div id='div_1' onclick="alert('I'm First!')">
     <div id='div_2' onclick="alert('I'm Second!')">
         <a id="alink" onclick="alert('I'm Third!')" href="http://www.baidu.com" rel="external nofollow" >Click Here</a>
     </div>
  </div>
</html>

上述代码中，div_1包含div_2，div_2包含a标签，共三层嵌套结构。

运行该实例并点击“Click Here”，会依次弹出三个alert提示框，顺序为“I'm Third!”、“I'm Second!”和“I'm First!”，这符合事件冒泡从内向外传播的特性。

此前项目中遇到的正是此类“事件重叠”问题。

这种多重触发显然不符合预期，因此需要阻止事件冒泡。具体实现方法如下。

阻止事件冒泡的实现方法

三、阻止事件冒泡的实现方法

首先展示纯JavaScript的实现方式：

function aOnClick(e){
   window.event? window.event.cancelBubble = true : e.stopPropagation();
}

说明：由于IE浏览器中阻止冒泡需使用window.event.cancelBubble = true，而其他现代浏览器使用e.stopPropagation();，因此代码中进行了兼容性处理。

此外，jQuery提供了更简洁的写法：

$(function() {
  $("#alink").click(function(event) {
    event.stopPropagation();
  });
});

其他阻止冒泡的方法及其差异

四、其他阻止冒泡的方法及其差异

上述函数可有效阻止冒泡，但还存在其他能达到类似效果的方法，它们之间存在细微差异。

$("#alink").click(function(event) {
  return false;
});

说明：上述代码通过jQuery操作alink元素。经测试，该方式虽能阻止冒泡，但同时屏蔽了a标签的默认行为（即href跳转）。这是其与纯阻止冒泡方法的主要区别。

顺便提及JavaScript中阻止默认行为的方法。

event.preventDefault();

从上述代码可见，return false;实际上是event.stopPropagation();与PreventDefault()功能的集合。

本文内容至此结束。

如需了解更多JavaScript相关知识，可参考本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。

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