DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
事件捕获阶段：（Netscape团队提出）
事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。
目标阶段：
当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。
事件冒泡阶段：（IE事件流）
事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。
image.png
事件机制（事件传递）【定义了元素事件被触发的先后顺序】：包括捕获和冒泡
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件机制</title>
</head>
<body>
<div id='parent1'>
<button id='child1'>btn</button>
</div>
<script>
child1.addEventListener('click',function(){
console.log("捕获，child");
}
,true);
parent1.addEventListener('click',function(){
console.log("捕获，parent");
}
,true);
child1.addEventListener('click',function(){
console.log("冒泡，child");
}
,false);
parent1.addEventListener('click',function(){
console.log("冒泡，parent");
}
,false);
</script>
</body>
</html>
</pre>
上面的两个参数：
true代表捕获阶段调用事件处理程序
false代表冒泡阶段调用事件处理程序，默认为false
点击butto按钮
image.png
事件捕获：从父级元素出发，先从父级元素触发，然后子元素触发。
事件冒泡：子元素触发，然后父级元素触发
有个更实际的例子：
<pre>
<div class="first">
testFirst
<div class="second">
testSecond
<div class="third">
testThird
</div>
</div>
</div>
</pre>
js代码：
<pre>
$(function(){
$('.first').click(function(){
alert("first");
})
$(".second").click(function(){
alert("second");
})
$(".third").click(function(){
alert("third");
})
})
</pre>
点击third时，会依次弹出third--->second--->first。这个就是很明显的事件冒泡触发。
W3C模型将这两个机制中和了，事件发生时按照：先捕获然后冒泡执行。
总结：总之要明白什么是事件，什么是事件捕获和冒泡（顺序不同）。
网友评论