所谓事件委托，就是把本该绑定在当前元素中的事件放到它的祖先元素上，让祖先元素委托处理。今天我们来了解一下JS中的事件委托。
目录
事件流事件委托End大家好，我是前端西瓜哥。今天就来了解一下活动委托。
所谓事件委托，就是把本该绑定在当前元素中的事件放到它的祖先元素上，让祖先元素委托处理。
事件流
事件流是指从页面接收事件的顺序，也可以理解为事件在页面中传播的顺序。
事件流由两个阶段组成：
捕获事件冒泡事件
我们通常使用addEventListener向元素添加事件：
document . query selector(' # card ')addevent listener(
点击'，
功能(事件){
console . log(' div #卡冒泡点击'，事件)；
},
错误的
);
第一个参数是事件名称，第二个参数是事件响应函数，可以获取当前事件对象。
第三个参数是可选的，表示监听是否是捕获阶段，false是冒泡阶段，也是默认值，true是捕获阶段。我们通常使用鼓泡阶段。
当我们点击元素时，这个函数将被执行。
假设我们的DOM结构如下：
超文本标记语言
头
标题前端西瓜/标题
meta charset='UTF-8' /
/头
身体
div id='应用程序'
div id='box-1 '
div id='card '卡/div
/div
div id='box-2'/div
/div
/body
/html
现在，当我们单击卡片文本时，DOM将生成一个事件流。
事件会先输入捕获阶段，从根节点移动到目标元素(div#card)，顺序是：
窗户
Document(文档根元素，未在HTML中显式声明)document . document element(HTML)document . body(body).目标元素div #卡
类似于调用事件对象的event.composedPath()方法得到的事件路径。
窗口看起来像一个全局变量，但它也可以绑定到事件。例如，窗口大小发生变化的resize事件只能绑定到窗口，而不能绑定到文档。
然后执行冒泡阶段，再反过来再经过这些节点。
我们会按照事件流的顺序依次执行这些节点上绑定的相应事件函数。
事件委托
如果我有一个好友列表，我想点击“聊天”按钮，获得相应的用户id，创建并进入相应用户的聊天会话。
保险商实验所
李前端西瓜按钮/聊天按钮/李
生活_西瓜按钮聊天/按钮/李
！-.-
李老王按钮聊天/按钮/李
/ul
最直接的方法是将所有按钮元素与它们自己的事件绑定。
节点少的时候还好，如果节点多达上千上万个，就需要声明相当多的事件函数，比较消耗内存。以及如果列表经常发生动态变更，也会导致大量事件监听的移除和绑定。
在这种情况下，事件委托是有前途的。
事件委托正是利用事件流的冒泡特性，将本来要绑定到多个元素的事件函数，委托到了其祖先元素上。
在上面的例子中，我们可以将事件绑定到ul节点，在执行函数时，通过事件对象获取必要的信息进行统一操作。
document.querySelector('ul ')。addEventListener('click '，(event)={
const target=event.target
const userId=target . get attribute(' data-user-id ')；
if (userId) {
join chat(userId)；
}
});
通过event.target，我们可以得到这个事件流的目标节点，然后从这个节点对象中提取出需要的信息。
这里我们需要获取用户id，因此我们需要向按钮元素添加一个自定义属性，如data-user-id，如下所示：
保险商实验所
李前端西瓜按钮数据-user-id='5 '聊天/按钮/李
生活_西瓜按钮数据-user-id=' 99 '聊天/按钮/李
！-.-
李老王按钮数据-user-id='63 '聊天/按钮/李
/ul
这样，不管有多少个li，更新多频繁，我们只需要维护一个功能。
结尾
事件委托实际上是将大量本应绑定到子元素的类似事件监控功能绑定到父元素或祖先元素，委托祖先元素来处理。
但是，在实际开发中，事件是委托的场景仍然很少，因为我们的列表通常不会太长。
关于JavaScript中事件委托示例的详细解释，本文到此结束。更多相关的JavaScript事件委托内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。