DOM事件流
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。
在DOM兼容浏览器中,事件流分为3个阶段
- 捕获阶段:事件从Document节点自上而下向目标节点传播的阶段。
- 目标阶段:事件到达目标元素,真正的目标节点正在处理事件的阶段。
- 冒泡阶段:事件从目标节点自下而上向Document节点传播的阶段。
注:在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程
触发事件的时机
一个元素事件在冒泡阶段触发还是在捕获阶段触发,根据添加事件的方式不同,事件触发的时机也不同。
- 捕获型事件:在事件捕获阶段触发执行
- 冒泡型事件:在事件冒泡阶段触发执行
-
在html标签中直接绑定的事件
这种事件在冒泡阶段触发
示例,点击.son元素,在控制台先输出“son”,再输出“father”。
<div class="father" onclick="logFather('father', event)"> <div class="son" onclick="logSon('son', event)"></div> </div> <script> function logFather(str,event) { console.log(str) } function logSon(str,event) { console.log(str) //event.stopPropagation();//阻止冒泡方式一 //event.cancelBubble = true;//阻止冒泡方式二 //阻止冒泡后,点击.son元素时,控制台只输出“son”,不触发父元素的点击事件 } </script>
-
用js分配的事件
这种事件在冒泡阶段触发
<div id="father" style="height: 100px;background-color: rgb(255, 164, 164);"> <div id="son" style="width:50px;height: 50px;background-color: rgb(255, 248, 151);"></div> </div> <script> let father = document.getElementById("father"), son = document.getElementById("son"); father.onclick = function(event){ console.log('father'); } son.onclick = function(event){ console.log('son'); // event.stopPropagation();//阻止冒泡方式一 // event.cancelBubble = true;//阻止冒泡方式二 } </script>
-
用addEventListener()绑定的事件
这种事件可以指定在什么阶段触发
addEventListener(event, function, *useCapture*); 第三个参数"useCapture" 参数用来确定事件在什么阶段触发,参数值为boolean
true:事件在捕获阶段触发
false:事件在冒泡阶段触发
不设置:事件默认在冒泡阶段触发
<div id="myDiv" style="background-color: coral;padding: 20px;"> <p id="myP" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落,我是冒泡。</p> </div> <div id="myDiv2" style="background-color: rgb(194, 255, 80);padding: 20px;"> <p id="myP2" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落,我是捕获。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function () { alert("你点击了 P 元素!");//点击 #myP 元素时先弹出 //event.stopPropagation();//阻止冒泡方式一 //event.cancelBubble = true;//阻止冒泡方式二 }, false); document.getElementById("myDiv").addEventListener("click", function () { alert(" 你点击了 DIV 元素 !");//点击 #myP 元素时后弹出 }, false); document.getElementById("myP2").addEventListener("click", function () { alert("你点击了 P2 元素!");//点击 #myP2 元素时后弹出 }, true); document.getElementById("myDiv2").addEventListener("click", function (event) { alert("你点击了 DIV2 元素 !");//点击 #myP2 元素时先弹出 // event.stopPropagation(); //也可以阻止事件继续被捕获,添加后事件不再继续传播 // event.cancelBubble = true;//也可以阻止事件继续被捕获,添加后事件不再继续传播 }, true); </script>