400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】DOM事件流

【Web前端基础知识】DOM事件流

  • 发布: 优就业it培训
  • 来源:
  • 2021-10-29 15:47:07
  • 阅读()
  • 分享
  • 手机端入口

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

DOM 事件流会有 3 个阶段:

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

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

事件捕获阶段:

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

确定目标阶段:

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

事件冒泡阶段:

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

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

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

  1. <div id="box1" style="background-color: red;"
  2.     <div id="box2" style="background-color: yellow;"
  3.         <div id="box3" style="background-color: yellowgreen;"></div> 
  4.     </div> 
  5. </div> 

Js代码为:

  1. var oDiv = document.getElementsByTagName('div'
  2. function fun(){ 
  3.     alert(this.id); 
  4. oDiv[0].addEventListener('click',fun) 
  5. oDiv[1].addEventListener('click',fun) 
  6. oDiv[2].addEventListener('click',fun) 

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

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

阻止冒泡:

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

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

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

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

  1. oDiv[2].onclick = function (ev){ 
  2.    var ev = window.event || ev;  
  3.    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

 

文章“【Web前端基础知识】DOM事件流”已帮助

更多内容

>>本文地址:http://www.ujiuye.com/zhuanye/2021/70629.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

(内含学习路线+视频教程+项目源码)

涉及Java、Web前端、UI设计、软件测试、Python等多个IT热门方向

打开微信扫一扫即可领取哦~

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME