web前端培训DOM事件流知识讲解

来源：培训无忧网 发布人：云朵

2022-03-10 14:17:41|已浏览：213次

web前端培训DOM事件流知识讲解

web前端培训基础知识：DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

web前端培训中要知道DOM 事件流会有 3 个阶段：

事件捕获阶段、确定目标阶段、事件冒泡阶段。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获阶段：

事件的传播是从最不特定的事件目标到最特定的事件目标。即从 DOM 树的根到叶子，也就是从document节点开始一层一层向下传播，直到寻找到触发事件的元素。

确定目标阶段：

通过捕获确定具体触发事件的元素，之后进行处理事件。

事件冒泡阶段：

事件的传播是从最特定的事件目标到最不特定的事件目标。即从 DOM 树的叶子到根，也就是我们从触发事件的元素一层一层向外传递事件，直到document节点。

比如在div元素在触发click事件时，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到div元素，事件进入目标阶段处理事件，在目标阶段结束之后，事件由div元素开始事件的冒泡阶段，一层一层向外直到Document节点为止。总的来说捕获阶段是从里到外，冒泡阶段是从里向外。

在如下代码中，点击时弹出各自的id名称。

</div>

Js代码为：

var oDiv = document.getElementsByTagName('div')

function fun(){

alert(this.id);

}

oDiv[0].addEventListener('click',fun)

oDiv[1].addEventListener('click',fun)

oDiv[2].addEventListener('click',fun)

当我们点击box3时，弹出顺序为box3 、box2、box1。

我们来分析一下过程，在点击事件发生时，开始进行事件捕获，从根节点document开始根据结构一层一层往里查找，到html元素，到body元素，再到box1元素，再到box2元素，再到box3元素，此时找到了触发事件的元素，捕获阶段结束。之后进入确认目标阶段，开始处理事件，弹出box3。处理事件完成后将事件根据结构依次传递给父元素，当传递到box2元素时，发现box2有同类型的事件，所以触发box2的点击事件弹出box2，再向外传递给box1元素，同理box1有同类型的事件，弹出box1.

web前端培训之阻止冒泡：

如果你感觉冒泡机制影响了你的代码，就可以进行阻止冒泡。

标准浏览器：ev.stopPropagation();(ev为事件对象)

Ie浏览器：ev.cancelBubble = true;(ev为事件对象)

例如在上述代码中只想让box3触发点击事件，我们就可以给box3添加事件时写上

oDiv[2].onclick = function (ev){

var ev = window.event || ev;

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-24766.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注web前端频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050

相关新闻