JavaScript之事件流、事件冒泡、事件捕获、事件委托：

已于 2022-12-07 13:44:50 修改
阅读量862 收藏 2
点赞数
分类专栏： JavaScript Html 文章标签： 前端
于 2022-11-24 17:58:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_70443954/article/details/128019602
版权
本文介绍了JavaScript中的事件流、事件冒泡和事件捕获的概念，详细解释了事件从DOM树中由父到子的捕获阶段，以及由子到父的冒泡阶段。此外，还探讨了事件委托的原理和应用场景，它允许通过在父元素上设置事件监听器来处理子元素的事件，简化代码并提高性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当浏览器从服务端获取到HTML文件时，浏览器对文件进行解析，将HTML解析生成DOM树。DOM树上有很多节点，最大的为Document，里面会有<html>标签，它里面又包含了<head>和<body>标签，在<body>里可以有<div>、<span>等标签。

事件流：

事件是与浏览器或文档交互的瞬间，比如点击事件，鼠标移动事件、获得焦点、失去焦点等。它是HTML与JavaScript之间交互的桥梁。如上图DOM是树形结构，如果同时给父子节点都绑定同一事件，那么当触发子节点的时候，事件发生的顺序是什么，这就有了事件流的概念。

事件流就是事件完整执行过程的路径，分为捕获阶段和冒泡阶段。

假如说页面一个div，要找到div，先从最大的document开始找，一层一层找到HTML标签，再找到HTML里面的body，再找到body里面的div，这个过

最低0.47元/天 解锁文章
事件冒泡，事件捕获，事件委托
Patty_2000的博客
11-09 679
1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的事件都有冒泡现象，比如如下几个：blur事件focus事件load事件 2、事件委托：事件捕获恰好与事件冒泡相反，它从顶层祖先元素开始，直到事件触发元素。 js事件捕获一般通过DOM2事件模型addEventListener来实现的： target.addEventListener(type, listener, useC..
js之事件冒泡，事件捕获，事件委托
01-08
事件捕获：当一个事件触发后，从window对象出发，不断经过下级节点，直到目标节点，这个过程就是事件捕获。自内而外，从根到叶，从小到大。 事件冒泡：即是事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。当事件到达目标节点之后，会沿着捕获阶段的路线原路返回，同样所有经过节点会被触发。即是自内而外，从叶到根，从小到大。 说起来很复杂，其实用一个示列就很容易理解 div{ margin: 50px; overflow: hidden; } #div1{ width:300px; height: 300px; backg
事件冒泡、事件捕获和事件委托
weixin_30263277的博客
04-24 392
摘自：https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html 事件流 　　JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。　　事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会...
【JavaScript】十六、事件捕获和事件冒泡
最新发布
llg___的博客
04-08 1277
此时，点击红色的儿子元素部分，因为红色部分也属于绿色的父亲div，更属于整个document，所以三个点击事件都触发，但因为现在addEventListener是true，所以，是事件捕获，从document到父div再到子div，因此，效果是：弹窗依次从父元素到子元素。对比给div绑定一个点击事件，当事件被触发时：会经历两个阶段，分别是捕获阶段、冒泡阶段，事件流则指的是事件完整执行过程中的这个流动路径。事件冒泡🫧：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
JS事件流和事件委托
weixin_34405557的博客
12-17 129
在上一篇《JS知识点大杂烩》中说到了事件流但没有详细的介绍，这篇文章就来介绍一下事件流。 事件流一共由三个阶段分别是： 1.捕获阶段 2.目标阶段 3.冒泡阶段 复制代码 事件绑定大家都知道，有DOM0级（on+type）和DOM2级（addEventListener）,我觉得说那么多概念不好理解，直接看代码吧,为了方便我就直接使用id来获取元素。 DOM0级 <div id="box1...
关于事件冒泡、事件捕获和事件委托
weixin_69356624的博客
05-08 2938
前置知识 事件流 在第四代Web浏览器（IE4 和 Netscape Communicator4 ）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？ 两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮的时候，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。 事件流描述了页面接收事件的顺序。结果非常有意思， IE 和 Netscape 开发团队提出了几乎完全相反的事件流方案。IE将支持 事件冒泡 流 ， 而 Netscape Communicator 将支
JavaScript(js)事件冒泡、事件捕获、事件委托详解
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-26 666
JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
理解这些基本概念后，可以有效地利用JavaScript事件机制实现交互式网页，例如阻止事件冒泡以防止不必要的事件处理，或者使用事件委托来减少内存消耗和提高性能。此外，掌握`addEventListener`的第三个参数（是否阻止...
事件冒泡、事件捕获、事件委托
m0_65638748的博客
09-10 319
js中的事件冒泡、事件捕获、事件委托
JS中的事件冒泡、事件捕获、事件委托
老司机的后备箱
03-28 828
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
事件冒泡/事件捕获/事件委托
hertha_js的博客
02-02 512
事件冒泡、事件捕获与事件委托
diligentkong的博客
11-28 1034
事件流：描述的是从页面中接收事件的顺序。IE和Netscape开发团队居然提出了差不多是相反的事件流的概念。 IE的事件流是事件冒泡流 Netscape的事件流是事件捕获流。事件冒泡事件冒泡(event bubbling)，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点(文档)。 举个例子：
js的时间委托
qq_36934775的博客
12-20 287
https://www.cnblogs.com/liugang-vip/p/5616484.html var e=e||window.event; var target=e.target; console.log(traget.nodeName.toLowerCase);//div,span,li target.id target.innerHTML
理解JavaScript事件冒泡与捕获：实例解析与代码演示
本文将深入解析事件冒泡、事件捕获以及事件委托这三个概念。 事件捕获（Capturing）是事件处理模型的一种，它的工作原理是从文档树的根节点（如`window`对象）开始，向下遍历到目标节点。在这个过程中，当事件在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值