js事件委托、事件冒泡和捕获

爱被打了一巴掌 2022-11-08 11:48 289阅读 0赞

## 事件冒泡和捕获 ##

**事件冒泡**是指，事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

而**事件捕获**与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

以该例子为例：

<div id="outer">
        <p id="inner">Click me!</p>
    </div>

p标签发生点击事件时：

事件冒泡：p -> div -> body -> html -> document

事件捕获：document -> html -> body -> div -> p  
![img][]  
**注意：1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；**

在进行项目开发的时候，我们可以自行选择事件处理函数在哪一个阶段被调用。addEventListener方法用来素绑定事件处理的函数，它的第三个参数允许我们设置为捕获阶段或冒泡阶段触发。

element.addEventListener(event, function, useCapture)

其中 useCapture为可选值。接受一个布尔值，指定事件是否在捕获或冒泡阶段执行。

true ：事件句柄在捕获阶段执行，即在事件捕获阶段调用处理函数。

false：默认值。事件句柄在冒泡阶段执行，即表示在事件冒泡的阶段调用事件处理函数。

## 事件代理/委托 ##

事件代理是将事件监听函数加到父元素上，借助事件冒泡机制来处理数目不定的子元素相同事件的方式。因为在事件冒泡中，子元素的事件触发会冒泡到父元素中，触发父元素相同的事件。若需要给多个子元素添加事件监听，我们只需给父元素添加事件监听即可。

如果我们不使用事件代理，那需要遍历父元素下的子元素，挨个进行事件监听。当元素量很大的时候，会影响页面性能。

### 事件代理/委托有什么作用，主要用于哪些场景 ###

**事件代理的主要用处：**

1.可以将多个事件处理函数减为一个，并且对于不同的元素可以有不同的处理方法。我们不必循环给每一个元素绑定事件，只需给父元素添加事件监听即可。

**应用场景：**

*  当要给一组子元素添加相同事件时，可以直接添加给父元素。

最经典的应用就是，一个列表会不断有新的数据的添加，如果每添加一个数据就生成一个li，就需要添加一个新的监听，代码结构就特别不好，这时候使用事件代理就很方便。

具体的例子，就比如，很多商品放在一个ul下面的li标签里面，里面有添加、删除、修改商品按钮，这时候我们就可以绑定这些商品的父元素ul标签，通过事件代理去找到要点击的商品，进行不同的函数处理。

[img]: /images/20221023/9d81c453cc044103b2f2ce448bfe809c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 js事件冒泡和事件捕获详解

avascript与HTML之间的交互是通过事件实现。一、事件流事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE...

女爷i/ 2024年04月17日 06:03/ 0 赞/ 74 阅读

相关事件冒泡和事件捕获以及事件委托

事件冒泡事件冒泡触发顺序： div->body->html->document <div id="box"> <div id="box1"></

亦凉/ 2022年12月23日 06:46/ 0 赞/ 232 阅读

相关事件冒泡、事件捕获、事件委托知识点汇总

事件冒泡、事件捕获、事件委托事件冒泡：从当前触发的事件目标一级一级往上传递，依次触发，直到document为止事件捕获：从document开始触发，一级一级往

小鱼儿/ 2022年12月19日 09:29/ 0 赞/ 219 阅读

相关 JS事件冒泡和事件代理（委托）

事件冒泡当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window <!DOCTYPE html> <html lang="en">

桃扇骨/ 2022年12月13日 12:51/ 0 赞/ 250 阅读

相关 js事件委托、事件冒泡和捕获

事件冒泡和捕获事件冒泡是指，事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

爱被打了一巴掌/ 2022年11月08日 11:48/ 0 赞/ 290 阅读

相关 jsDOM获取元素方法、事件委托、事件捕获和事件冒泡

> 本篇博文解决的问题： > > 1、给父元素注册点击事件，特定子元素响应该点击事件；——2.2 事件委托 > > 2、给父元素注册点击事件，点击父元素，所有子元素响应/不

清疚/ 2022年05月23日 07:59/ 0 赞/ 643 阅读

相关 js 事件冒泡和事件捕获

一块：事件流描述的是从页面接收事件的顺序。 IE的事件是冒泡事件流，而firefox的事件流是捕获事件流。 1.事件冒泡 IE的事件流叫做事件冒泡

比眉伴天荒/ 2022年05月19日 01:12/ 0 赞/ 385 阅读

相关 JS 事件流事件冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。　

末蓝、/ 2022年03月15日 17:36/ 0 赞/ 404 阅读

相关 js之事件冒泡和事件捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE

淩亂°似流年/ 2021年12月21日 13:37/ 0 赞/ 369 阅读

相关 JS事件捕获和事件冒泡

事件冒泡大家都知道的，在实际开发中也经常的接触到，然而事件捕获是个什么鬼？　　对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，...

测试账号/ 2021年01月12日 03:32/ 0 赞/ 757 阅读