DOM事件流
DOM事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。
DOM事件流分为两个部分，一是事件捕获，二是事件冒泡
DOM事件流分为两个部分，一是事件捕获，二是事件冒泡
以生活中的简单现象为例，如果把石头称作为DOM事件，而把石头扔进水里，下沉的过程就称之为事件捕获，下沉到底时，石头附近会冒出泡泡，泡泡的方向竖直向上，冒泡的过程就称作为事件冒泡
代码演示
html及样式
<style>
.father {
box-sizing: border-box;
width: 500px;
height: 500px;
padding: 100px;
background-color: skyblue;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="father">
<div class="son"></div>
</div>事件捕获
var father = document.querySelector(".father");
var son = document.querySelector(".son");
// // 以捕获方式绑定事件,第三个参数为true
father.addEventListener("click", function() {
alert("father");
}, true);
son.addEventListener("click", function() {
alert("son");
}, true);事件冒泡
//此事件点击son盒子首先弹出
var father = document.querySelector(".father");
var son = document.querySelector(".son");
//以冒泡方式绑定事件,第三个参数为false
father.addEventListener("click", function() {
alert("father");
}, false);
son.addEventListener("click", function() {
alert("son");
}, false);事件捕获的执行结果：先弹出father 再弹出son
事件冒泡的执行结果：先弹出son 再弹出father
P.S 在实际应用中，事件冒泡的运用场景更多，更灵活
但有些事件是没有冒泡的，比如onblur onfocus onmouseover onmouseleave等