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

事件冒泡和捕获

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

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

以该例子为例：

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

p标签发生点击事件时：

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

事件捕获：document -> html -> body -> div -> p

注意：1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；

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

 element.addEventListener(event, function, useCapture)

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

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

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

事件代理/委托

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

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

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

事件代理的主要用处：

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

应用场景：

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

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

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