嗨较大家良好， 我是个没怎么上过学的较小伙伴，今天想跟你们聊聊事件委托这件事儿。

哪些叫做事件委托？

事件委托就是把全部需要监听的子元素都交给父级统一处理。比方说有一堆待办事项列表， 扎心了... 你能够在父容器上加一个click监听器，然后在回调里判断点击的是哪一条。

这样做最最主要的优势就是：不需要给各个

都加一个监听器， 节省内存，也让代码更简洁。 还有一点很十分沉关键， 那就是当你用AJAX拉崭新数据时崭新来的

起初我以为... *噪声*：喔喔喔，还有啊……要记住给父级加listener哦！别忘了哦！

为哪些要这么做？

划水。 *噪声*: 如果你给100个, 那么就会产生100个函数实例和100个关系，内存开销较大较大增。 而用*事件委托*, 父容器只需要一次绑定，就能覆盖全部子元素。

准确地说... 另一方面 当你动态添加崭新的, 别担心，需要沉重崭新遍历绑定；只要崭新元素在父容器里它也能冒泡到父级，被统一处理。

*代码示例*

// 原始写法 var list = document.getElementById; var items = list.getElementsByTagName; for {     items.addEventListener; } // 优化写法 list.addEventListener {     if {         handleItemClick;     } ); }，说明…..

*噪声*：看不懂？那就随便改改呗——只要保持冒泡即可！哈哈哈。

*哪些时候不适合用事件委托？*

*噪声*: 有些特殊情况， 比如：

• *stopPropagation* 被调用了那就不会冒泡啦！
• *event.capture*: 如果你想捕获阶段而不是冒泡阶段，也不是很合适。
• *更多层嵌套*: 嵌套太较深时判断目标会变繁杂。

不过较大更多数场景还是能够用出来的，只要注意这几点就行。

*案例：动态表格行*

# 虚假设我们有一个表格， 每行有编辑和删除按钮， 也是没谁了。 当用户点击时我们想弹窗提示。我们能够这么写：

// 建立表格容器 var table = document.getElementById; table.addEventListener { 我是深有体会。 if ) { // 编辑逻辑 } else if ) { // 删除逻辑 } });

*噪声*: 如果你觉得写这段代码还不错，那我就先不再打扰你了～持续往下看吧！

*一下*

• #1: 事件委托能降较低监听器数量， 从而减较低内存占用和提升性能~**;
• #2: 它利用冒泡机制，让子元素触发后传递到父级；**;
• #3: 动态内容不需要额外绑定，只要保持结构一致即可；**;
• #4: 注意不要在子元素里调用stopPropagation或者误用capture模式；**;
.

**注：如果你还有问题，能够随便提问，我有可能也不了解答案，但至更少我们一起探讨嘛！**

---

本文作者未受雇佣， 仅为分享经验，如有侵权请联系删除。

---