1、为什么要进行事件委托？
首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。
为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件监听器：
<button id="buttonId">Click me</button>
<script>
document.getElementById('buttonId')
.addEventListener('click', () => console.log('Clicked!'));
</script>
以上就是侦听单个元素（尤其是按钮）上事件的方式。
如果需要监听多个按钮上的事件呢？下面是一种可能的实现：
<div id="buttons">
<button class="buttonClass">Click me</button>
<button class="buttonClass">Click me</button>
<!-- buttons... -->
<button class="buttonClass">Click me</button>
</div>
<script>
const buttons = document.getElementsByClassName('buttonClass');
for (const button of buttons) {
button.addEventListener('click', () => console.log('Clicked!'));
}
</script>
按钮列表被迭代为 for (const button of buttons) ，并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被添加或删除后，你必须还要手动删除或附加事件监听器。
有没有更好的方法？
幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。
事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。
2、事件传播
点击事件会触发多少个元素？毫无疑问，按钮本身会收到单击事件。而且所有按钮的祖先，甚至包括 document 和 window 对象也会收到。
点击事件的传播分三个阶段：
1.捕获阶段 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先
2.目标阶段 —— 事件在用户单击的元素上触发
3.冒泡阶段——最后，事件冒泡通过目标元素的祖先，一直到根元素 document 和 window。
addEventListener 方法的第三个参数 captureOrOptions：
element.addEventListener(eventType, handler[, captureOrOptions]);
使你可以捕获来自不同阶段的事件。
如果缺少 captureOrOptions 参数，或者参数为 false 或 {capture：false}，那么侦听器将捕获目标（target）和 冒泡阶段（bubble phases）的事件
如果参数是 true 或 {capture：true}，那么侦听器将会侦听捕获阶段（capture phase）的事件。
通过下面的代码，你会侦听到在 <body> 元素上发生的捕获阶段的点击事件：
document.body.addEventListener('click', () => {
console.log('Body click event in capture phase');
}, true);
那么事件传播是怎样帮助捕获多个按钮事件的呢？
该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。
3、事件委托
让我们用事件委托来捕获多个按钮上的点击：
<div id="buttons"> <!-- Step 1 -->
<button class="buttonClass">Click me</button>
<button class="buttonClass">Click me</button>
<!-- buttons... -->
<button class="buttonClass">Click me</button>
</div>
<script>
document.getElementById('buttons')
.addEventListener('click', event => { // Step 2
if (event.target.className === 'buttonClass') { // Step 3
console.log('Click!');
}
});
</script>
事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听 <div id="buttons">。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。
使用事件委托需要3个步骤：
步骤1：确定要监视事件的元素的父级元素
在上面的例子中， <div id="buttons"> 是按钮的父元素。
步骤2：把事件侦听器附加到父元素
document.getElementById('buttons') .addEventListener('click', handler) 将事件侦听器附加到按钮的父元素。该事件侦听器也会对按钮单击做出反应，因为按钮单击事件冒泡通过祖先元素（由于事件传播）。
步骤3：用 event.target 选择目标元素
单击按钮时，将会用event 对象参数调用处理函数。属性 event.target 访问在其上调度了事件的元素，在例子中是一个按钮：
// ...
.addEventListener('click', event => {
if (event.target.className === 'buttonClass') {
console.log('Click!');
}
});
顺便说明一下，event.currentTarget 指向事件侦听器直接附加到的元素。在例子中，event.currentTarget 是 <div id="buttons">。
现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。
总结
当发生点击事件（或传播的任何其他事件）时：
事件从 window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；
事件发生在目标（目标阶段）上；
最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。
该机制称为事件传播。
事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。
使用事件委托需要三个步骤：
1.确定要监视事件的元素的父级元素
2.把将事件侦听器附加到父元素
3.用 event.target 选择目标元素
猜你喜欢
联络方式：
电话：132 5357 1993
邮箱：1069484130@qq.com
-
什么是本地区关键词全国性关键词？
地区性关键词：是指关键词中带有地区名称，如：关键词为“深圳网站建设公司”，该词为地区性关键词，因为关键词中出现了地区名称“深圳”。全国性关键词：是指关键...
-
企业标志LOGO如何确定？请记住这5点！
对于很多甲方企业客户来说，因为自己公司没有专业品牌管理团队和品牌形象管理总监，当他们面对专业品牌设计公司提供的企业标志LOGO设计方案的时候，很难从提供的方案中进行正确选择，而对于LOGO标志设计师的创意诠释和推荐，有的时候也表现的难以定夺，所以这成为很多企业在进行选择时的一个大大的问号。今天，就由专业的网站建设公司深正互联来分享如何正确选择LOGO标志？...
-
商家揭秘：让你剁手的19个“潜规则”
很早之前就有一个说法，淘宝是女人的天下，京东是男人的天下，但目前崛起的很多电子商务网站，如聚美优品、蘑菇街、唯品会却更针对的是女性群体。有的人觉得女性购物好做，有的人觉得...
-
让新手快速熟悉的四个网站设计技巧
如何吸引用户点击停留？是网站设计非常重要的方向，现在就让小编给大家介绍一定要知道的四个网站设计技巧！ 1、网站简洁又个性的设计 在互联网络中4秒就是用户给网站设计者的展法工夫。用户的急躁是无限的，网站设计师务必要在无限的工夫内让用户加深对网站的记忆和互动。这就务求网站设计师务必要精准、简洁的转达出网站最做什么的、网站的性能是什么等用户想要晓得的信息。 2、网站设计标点符号 网站中的每一个标点符号的设计都有可能吸引到用户点击，因而网站设计师在继续网站设计时定然要准确到标点符号，让相反...
-
资深程序猿意见：选redis还是memcache？
memcache和redis是互联网分层架构中，最常用的KV缓存。不少同学在选型的时候会纠结，到底是选择memcache还是redis。 画外音：不鼓励粗暴的实践，例如“memcache提供的功能是redis提供的功能的子集，不用想太多，选redis准没错”。 虽然redis比memcache更晚出来，且功能确实也更丰富，但对于一个技术人，了解“所以然”恐怕比“选择谁”更重要一些。 网站开发公司.jpg 什么时候倾向于选择redis? 业务需求决定技术选型，当业务有这样一些特...
