// 每日前端夜话 第367篇
// 正文共:1500 字
// 预计阅读时间:6 分钟
![4d58a90b2c84b378eed6c0b577702af2.png](https://i-blog.csdnimg.cn/blog_migrate/5d8921302fec4ccd3079c4ae0f4d597b.png)
为什么要进行事件委托?
首先实现一个小功能:在单击 HTML 的按钮后,把消息输出到控制台。
为了实现这个小功能,你需要选择按钮,然后再用 addEventListener()
方法来附加事件监听器:
<button id="buttonId">Click mebutton>
<script>document.getElementById('buttonId')
.addEventListener('click', () => console.log('Clicked!'));script>
以上就是侦听单个元素(尤其是按钮)上事件的方式。
如果需要监听多个按钮上的事件呢?下面是一种可能的实现:
<div id="buttons">
<button class="buttonClass">Click mebutton>
<button class="buttonClass">Click mebutton>
<button class="buttonClass">Click mebutton>
div>
<script>const buttons = document.getElementsByClassName('buttonClass');for (const button of buttons) {
button.addEventListener('click', () => console.log('Clicked!'));
}script>
你可以在 Codesandbox 上查看它是怎样工作的[1]。
按钮列表被迭代为 for (const button of buttons)
,并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被添加或删除后,你必须还要手动删除或附加事件监听器。
有没有更好的方法?
幸运的是,如果我们使用“事件委托”模式的话,侦听多个元素上的事件只需要一个事件侦听器。
事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理,应该先了解什么是事件传播。
事件传播
当你单击下面 html 中的按钮时:
<html>
<body>
<div id="buttons">
<button class="buttonClass">Click mebutton>
div>
body>
html>
点击事件会触发多少个元素?毫无疑问,按钮本身会收到单击事件。而且所有按钮的祖先,甚至包括 document
和 window
对象也会收到。
点击事件的传播分三个阶段:
- 捕获阶段 —— 从
window
,document
和根元素开始,事件向下扩散至目标元素的祖先 - 目标阶段 —— 事件在用户单击的元素上触发
- 冒泡阶段——最后,事件冒泡通过目标元素的祖先,一直到根元素
document
和window
。
addEventListener
方法的第三个参数 captureOrOptions
:
element.addEventListener(eventType, handler[, captureOrOptions]);
使你可以捕获来自不同阶段的事件。
- 如果缺少
captureOrOptions
参数,或者参数为false
或{capture:false}
,那么侦听器将捕获**目标(target)和 冒泡阶段(bubble phases)**的事件 - 如果参数是
true
或{capture:true}
,那么侦听器将会侦听**捕获阶段(capture phase)**的事件。
通过下面的代码,你会侦听到在 元素上发生的捕获阶段的点击事件:
document.body.addEventListener('click', () => {
console.log('Body click event in capture phase');
}, true);
在这个 Codesandbox 演示[2]中,单击按钮时,你可以在控制台中查看事件的传播方式。
那么事件传播是怎样帮助捕获多个按钮事件的呢?
该算法很简单:把事件侦听器附加到按钮的父级,并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。
3.事件委托
让我们用事件委托来捕获多个按钮上的点击:
<div id="buttons">
<button class="buttonClass">Click mebutton>
<button class="buttonClass">Click mebutton>
<button class="buttonClass">Click mebutton>
div>
<script>document.getElementById('buttons')
.addEventListener('click', event => { // Step 2if (event.target.className === 'buttonClass') { // Step 3console.log('Click!');
}
});script>
打开Codesandbox 演示[3],然后单击任意按钮,你会看到 'Click!'
消息被记录到控制台。
事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上,而是可以委托父监听