冒泡浏览器(root成功率100%的软件)

日期: 2021-03-03 08:32:44 阅读: 15

不要洗脑系列"-DOM事件

这两天突然凉了,请自觉穿上衣服,我个人不帮你。毕竟男女有别。

今天继续先打开【无洗脑系列】,很快洗脑文章又来了。帮大家解惑是小北哥哥一直这么帅的最大原因!

本文主要解决两个问题

  1. 什么是事件流?

  2. DOM事件流的三个阶段。

起因

温故了一下我的《Java高级程序设计》的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞)。想起了dom事件流原理,好多人不明白,只知道click mouseout等实用场景,真要理解和更进一步的前端是要必须:理论+实践 并行的。

当然,DOM事件包含了很多知识,所以本文重点介绍了自学时遇到的困难,DOM事件流。

stream的概念在今天的Java中随处可见。例如,今天这篇文章中的React中的单向数据流、Node中的流或DOM事件流。是流动的生动体现。对于流程的具体概念,我们采用如下解释:

从术语上讲,流程是输入输出设备的抽象。从过程的角度来看,流是有方向的数据。

事件流中的事件气泡和事件捕获

在浏览器开发过程中,开发团队遇到了一个问题。也就是页面的哪个部分有具体的事件?

想象一张纸上画着一组同心圆。如果你把手指放在圆心上,你的手指指的不是一个圆,而是纸上所有的圆。放在实际页面上,当你点击一个按钮时,实际上你同时点击了该按钮的所有父元素。

开发团队的问题是,当按钮被点击时,按钮的最外层父元素是接收事件并首先执行,还是特定元素接收事件并首先执行?所以这里引入了事件流的概念。

事件流描述从页面接收事件的顺序。

因为有两种观点,所以有两种事件流,即事件冒泡和事件捕获。目前的主流是事件冒泡。

Event Bubble是指当一个事件开始时,被最特定的元素(即事件发生的节点)接收,然后一步步扩散到不太特定的节点。举个栗子,就好理解了。

然后,我们向按钮及其父元素添加点击事件。

效果如图:

如果在代码所示的页面上点击按钮,点击事件将按以下顺序传播(Chrome浏览器):

也就是说,click事件首先在 <button> 元素上发生,然后逐级向上传播。这就是事件冒泡。

事件捕捉

事件捕捉的概念与事件冒泡正好相反。它认为当一个事件发生时,父元素应该更早地接收该事件,而具体元素将最后接收该事件。比如刚才的demo,如果是事件捕捉,事件的顺序会如下:

当然,由于时代的变化,事件冒泡的方式更好。所以,放心使用事件冒泡,有特殊需求再用事件捕捉。

DOM事件流

DOM事件流包括三个阶段:

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

如图(

事件捕捉阶段

也就是说,当事件发生时,首先发生的是事件捕捉,这为父元素拦截事件提供了机会。

例如,我把上面的Demo中,window点击事件更改为使用事件捕获模式。(addEventListener最后一个参数, 为true则代表使用事件捕获模式 ,false则表示使用事件冒泡模式。不理解的可以去学习一下addEventListener函数的使用)

这时,点击按钮的效果是这样的。

可以看到click事件首先被父元素截获,这个函数只在事件捕获阶段起作用。

在目标和事件的冒泡阶段

事件到达具体元素时,发生在具体元素上,被视为冒泡阶段的一部分。然后,冒泡阶段发生,事件开始冒泡。

防止事件冒泡

可以防止事件冒泡的过程。防止冒泡事件造成不必要的错误和麻烦。

这个方法就是: stopPropagation()

我们对按钮的点击事件做了一些修改。

点击后效果如下:

不难看出事件到达特定元素后停止冒泡。它不影响父元素的事件捕获。

Summary和Reflection

Event Flow:描述从页面接收事件的顺序。有两种类型:事件冒泡和事件捕获。DOM事件流有三个阶段:

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

在学习DOM事件的过程中,我了解了DOM事件的三个阶段,也知道了事件冒泡是为了什么,如何防止。有了前期学到的二叉树知识,受益匪浅。

注意

本文已获得

兴化市人民政府办公室

相关推荐

  1. 仙之侠道3(仙之侠道三斗佛转职学什么)
  2. 酷艾英语(线上英语哪家口碑最好)
  3. 键盘同步器(电脑同步鼠标键盘软件)
  4. adb工具包(adb 命令如何进入刷机模式)
  5. dnf超级助手(超级点击器超级助手)
  6. 360抢货神器(抢购神器哪个比较实用)
  7. 生辰八字称骨算命(生辰八字查询骨重)
  8. 易迅电子病历(易迅电子病历注册码)
  9. 小幺鸡表情包(幺鸡麻将表情包)
  10. 未来宝宝照片合成器(父母合成宝宝照片app)
  11. 吉大二院(吉大二院耳鼻喉谁权威)
  12. 汉网社区(华夏汉网为什么没有了)
  13. 风行播放器免费下载(风行手机版下载)
  14. 游戏守望者(加速器网)
  15. 飞速流量专家(手机加速器下载)
  16. 博易大师期货(信管家博易大师外盘版)
  17. 方正证券同花顺完美版(俄罗斯方块完美版)
  18. 新神奇传说3存档(云存档)
  19. 河北省云办税厅(河北税务网上办税大厅)
  20. 三国霸业1下载(三国霸业游戏下载)

阅读下一篇