JavaScript 事件冒泡与捕获机制详解及执行顺序

JavaScript事件冒泡与捕获机制详解及执行顺序

在JavaScript中，事件监听器默认在冒泡阶段触发，而非捕获阶段。这一特性至关重要，它决定了当父元素与子元素同时绑定同一事件时，子元素绑定的处理函数会先于父元素执行。具体表现可通过以下示例观察。

<!Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{margin:0;padding: 0;}
 </style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
 <div id="id2" style="height:200px; border:1px solid #000;">
 <div id="id3" style="height:50px; border:1px solid #000;"></div>
 </div>
</div>
</body>
<script type="text/javascript">
 var obj1=document.getElementById('id1'); 
 obj1.addEventListener('click',function(){
 alert('id1');
 },false);
 var obj2=document.getElementById('id2');
 obj2.addEventListener('click',function(){
 alert('id2');
 },true);
 var obj3=document.getElementById('id3');
 obj3.addEventListener('click',function(){
 alert('id3');
 },true);
 /*如果第三个参数为true，则事件在捕获阶段执行，如果第三个参数为false，则事件在冒泡阶段执行*/
</script>
</html>

当点击id为id3的元素时，控制台或弹窗输出的顺序依次为：id2、id3、id1。

上述现象的原因在于，obj2与obj3绑定的监听函数被配置为在捕获阶段执行，而obj1的事件处理逻辑位于冒泡阶段，因此遵循从内到外的冒泡顺序触发。

核心要点总结

核心要点总结

必须明确，JavaScript事件默认在冒泡阶段执行，这是理解DOM事件流的基础。

开发者可以通过在绑定事件时指定第三个参数，来强制控制事件是在冒泡阶段还是捕获阶段执行。

obj.addEventListener(event,function(){},bool)

当该参数为false时，表示事件在冒泡阶段执行。

当该参数为true时，表示事件在捕获阶段执行。

JavaScript引擎在获取事件后，首先从根元素开始向下遍历，查找并执行所有处于捕获阶段的监听器；随后进入冒泡阶段，从目标元素向上逐一执行冒泡阶段的监听器。因此，捕获阶段的执行顺序位于冒泡阶段之前。

阻止事件冒泡与默认行为

阻止事件冒泡

在W3C标准浏览器中，使用e.stopPropagation()方法可以阻止事件继续向父级传播；对于旧版Internet Explorer浏览器，则需使用e.cancelBubble = true来实现相同效果。

阻止默认行为

在W3C标准浏览器中，使用e.preventDefault()方法可以阻止元素的默认动作（如链接跳转）；在旧版Internet Explorer浏览器中，则需设置e.returnValue = false。

关于JS事件冒泡以及onclick、click与on()方法的触发顺序关系

关于JS事件冒泡以及onclick、click与on()方法的触发顺序关系

在触发优先级上，遵循以下顺序：onclick > click > on()。

通过onclick和click绑定的事件处理函数，彼此之间遵循标准的事件冒泡规则，即从最内层元素向外层元素依次触发。

通过on()方法绑定的事件，其触发时机总是晚于通过onclick和click绑定的事件。

以上内容涵盖了JavaScript事件机制的核心概念，希望能为读者在开发或学习过程中提供帮助，感谢支持。