事件冒泡原理与jQuery阻止冒泡的三种方法

事件冒泡原理与jQuery阻止冒泡的三种方法

首先需要明确一个核心概念：任何事件的触发都必须有明确的事件源，即引发该动作的具体DOM对象。事件不会凭空产生，而是由特定元素的操作所引发。

事件触发后，会在DOM树中开始传播。由于初始事件源通常不具备独立处理复杂逻辑的能力，事件必须向外扩散，以便到达具备处理能力的代码区域。例如，点击按钮触发click事件后，该事件会向上传播，最终由绑定在元素或其祖先上的事件处理函数进行响应。

在传播路径上，一旦遇到能够处理该事件的函数，该函数即被视为“捕获”到了此事件。

这里涉及核心机制：函数是如何在传播链中捕获事件的？这直接关联到“事件冒泡”的概念。

为直观理解冒泡，可将DOM结构想象为一杯分层的水。最顶层是window对象，其下是document对象及history等，document之下又包含各类子元素。这种层级结构构成了DOM对象树。

上述层级关系构成了标准的DOM对象树结构。

事件传播具有明确的方向性。以点击按钮为例，click事件从按钮本身开始，自下而上向父级元素传播（类似气泡从水底上浮）。在传播过程中，引擎会检查当前层级的特定事件属性（如onclick）是否定义了有效的处理函数。若定义存在且有效，则立即执行该函数或语句；随后事件继续向上传播至父级（如form或document）。若父级也定义了同名事件处理程序，则继续执行。

假设按钮嵌套在form中，form嵌套在document中，且这三层均定义了onclick处理函数。当按钮被点击时，系统将依次执行按钮自身及所有祖先层级的处理函数，共计4次调用。

这种传播机制在0级DOM事件模型中同样适用。

jQuery阻止冒泡的三种方法

1、通过返回 false 来取消默认的行为并阻止事件起泡。

jQuery 代码:

 
$("form").bind(
"submit",
function() {
return false;
　　 } 
); 

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

 
$("form").bind(
"submit",
function(event){
event.preventDefault();
　　} 
); 

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

 
$("form").bind(
"submit",
function(event){
event.stopPropagation();
　　} 
); 

JS事件冒泡验证与总结

本节核心关键词包括：对象、触发事件、捕获事件、执行处理、起泡。这构成了JavaScript事件执行的完整流程。其中冒泡机制尤为关键：如同分层的水杯，底层是当前触发对象，向上范围逐渐扩大，顶层为window，次顶层为document。气泡上浮时，会检测当前层级是否绑定了事件处理方法；若有，则执行；若无，则继续上浮直至window。开发者可在任意层级调用 event.stopPropagation() 来阻止事件继续向上传播。以下代码用于验证JS事件冒泡过程。

 
<script type="text/javascript">
$(document).ready(function(){
$('.one').click(function(e){
alert('one');
});　　　　　　　　　　　　 
$('.two').click(function(e){
alert('two');
}); 
$('.three').click(function(e){
alert('three');
//阻止起泡取消下面的注释
// e.stopPropagation();
}); 
}); 
</script>
<div class="one" style="width:200px;height:200px;background:green;">
one
<div class="two" style="width:150px;height:150px;background:yellow;">
two
<div class="three">
three
</div>
</div>
</div>

1.一个事件起泡对应触发的是上层的同一事件

特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件

（双击包含单击）。

2.如果在click事件中，在你要处理的事件之前加上e.preventDefault();

那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。

3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。