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

 

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

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

获取测试结果
 
课程资料、活动优惠 领取通道