Web前端这些高端技术只有你还不知道，JavaScript事件流，【跳槽必备】

事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

 
 

  
  Click me!
 
 

上面这段html代码中，单击了页面中的

元素，

在冒泡型事件流中click事件传播顺序为**

—》 —》**—》 document

在捕获型事件流中click事件传播顺序为document—》—》—》

note:

1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。

IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

2、DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

• 事件捕获阶段：实际目标（
  ）在捕获阶段 不会接收事件。也就是在捕获阶段，事件从document到再到就停止了。上图中为1~3.
• 处于目标阶段：事件在
  上发生并处理。 但是事件处理会被看成是冒泡阶段的一部分。
• 冒泡阶段：事件又传播回文档。

note:

1）、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。

2）、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

两次机会在目标对象上面操作事件例子：

运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：

3、事件流的典型应用事件代理

传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

1、事件代理

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

传统事件处理，为每个元素添加事件处理器，代码如下：

事件代理的处理方式，代码如下：

 
 
red
orange
yellow
green



**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/a308e9097a9e964207fda15ad2dd01e1.jpeg)
![img](https://img-blog.csdnimg.cn/img_convert/39bb8ad94af818092215a1da9eb32632.png)
![img](https://img-blog.csdnimg.cn/img_convert/0e457dab3902bb8a4e80c687f8225d9b.png)
![img](https://img-blog.csdnimg.cn/img_convert/5286475e38405aea009f4778fa5a2e63.png)
![img](https://img-blog.csdnimg.cn/img_convert/eea4de5c2f0976d7b5959b04d45704f2.png)
![img](https://img-blog.csdnimg.cn/img_convert/c0aed5deaf2fb28583011ed133559573.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**

**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）**
![img](https://img-blog.csdnimg.cn/img_convert/e61fed6d1ece7eed0ed765fb16c358d4.png)



# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心



![](https://img-blog.csdnimg.cn/img_convert/2a2383f50a8a79f78751385b807c2b8b.webp?x-oss-process=image/format,png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
![img](https://img-blog.csdnimg.cn/img_convert/db497052ed8976d1d20d11d58a377c5c.png)

鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
[外链图片转存中...(img-5QmT4G7M-1712459208921)]