JS中事件委托的示例分析-创新互联
这篇文章主要介绍JS中事件委托的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联主营金口河网站建设的网络公司,主营网站建设方案,
重庆App定制开发,金口河h5小程序开发搭建,金口河网站营销推广欢迎金口河等地区企业咨询
为什么要进行事件委托？
首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。
为了实现这个小功能，你需要选择按钮，然后再用addEventListener() 方法来附加事件监听器：
Click me
以上就是侦听单个元素（尤其是按钮）上事件的方式。
如果需要监听多个按钮上的事件呢？下面是一种可能的实现：
Click me
Click me
Click me
你可以在 Codesandbox 上查看它是怎样工作的。
按钮列表被迭代为for (const button of buttons) ，并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被添加或删除后，你必须还要手动删除或附加事件监听器。
有没有更好的方法？
幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。
事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。
事件传播
当你单击下面 html 中的按钮时：
Click me
点击事件会触发多少个元素？毫无疑问，按钮本身会收到单击事件。而且所有按钮的祖先，甚至包括document 和window 对象也会收到。
点击事件的传播分三个阶段：
addEventListener 方法的第三个参数captureOrOptions：
element.addEventListener(eventType, handler[, captureOrOptions]);
使你可以捕获来自不同阶段的事件。
通过下面的代码，你会侦听到在
document.body.addEventListener('click', () => {
console.log('Body click event in capture phase');
}, true);在这个 Codesandbox 演示中，单击按钮时，你可以在控制台中查看事件的传播方式。
那么事件传播是怎样帮助捕获多个按钮事件的呢？
该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。
3.事件委托
让我们用事件委托来捕获多个按钮上的点击：
Click me
Click me
Click me
