事件委托利用了JavaScript事件中两个经常被忽视的特性:事件冒泡和目标元素。当一个事件在一个元素上被触发时，例如鼠标点击一个按钮，同样的事件也会在该元素的所有祖先上被触发。这个过程被称为事件冒泡;事件从初始元素冒泡到DOM树的顶部。

Imagine an HTML table with 10 columns and 100 rows in which you want something to happen when the user clicks on a table cell. For example, I once had to make each cell of a table of that size editable when clicked. Adding event handlers to each of the 1000 cells would be a major performance problem and, potentially, a source of browser-crashing memory leaks. Instead, using event delegation, you would add only one event handler to the table element, intercept the click event and determine which cell was clicked.

委托是一种技术，在这种技术中，一个对象向外部表达某种行为，但实际上将实现该行为的责任委托给一个关联对象。乍听起来，这与代理模式非常相似，但其目的却大不相同。委托是一种集中对象(方法)行为的抽象机制。

一般来说:使用委托来替代继承。继承是一个很好的策略，当父对象和子对象之间存在密切的关系时，但是，继承会非常紧密地结合对象。通常，委托是表达类之间关系的更灵活的方式。

这种模式也称为“代理链”。其他一些设计模式使用委托——状态模式、策略模式和访问者模式都依赖于它。

Dom事件委托与计算机科学的定义有所不同。

它指的是处理来自许多元素(如表单元格)、来自父对象(如表)的冒泡事件。它可以使代码更简单，特别是在添加或删除元素时，并节省一些内存。

事件的代表团

将事件监听器附加到父元素，当子元素上发生事件时触发该监听器。

事件传播

当事件通过DOM从子元素移动到父元素时，这称为事件传播，因为事件在DOM中传播或移动。

在本例中，按钮的事件(onclick)被传递给父段。

$(document).ready(function() { $(".spoiler span").hide(); /* add event onclick on parent (.spoiler) and delegate its event to child (button) */ $(".spoiler").on( "click", "button", function() { $(".spoiler button").hide(); $(".spoiler span").show(); } ); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <p class="spoiler"> <span>Hello World</span> <button>Click Me</button> </p>

Codepen

DOM事件委托是一种通过事件“冒泡”(又名事件传播)的魔力，通过单个公共父(而不是每个子)响应ui事件的机制。

当一个事件在一个元素上被触发时，会发生以下情况:

事件被分派到它的目标 EventTarget和任何事件监听器 发现有触发。冒泡 事件将触发任何 找到的其他事件侦听器 跟随EventTarget的父对象 链条向上，检查任何事件 侦听器注册在 连续EventTarget。这个向上 延续到和 包括《文件》。

事件冒泡为浏览器中的事件委托提供了基础。现在，您可以将事件处理程序绑定到单个父元素，并且当事件发生在它的任何子节点(以及它们的任何子节点)上时，该处理程序将被执行。这是事件委托。下面是一个实践中的例子:

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

在这个例子中，如果您要单击任何<li>子节点，您将看到一个“click!”的警报，即使没有绑定到您所单击的<li>的单击处理程序。如果我们将onclick="…"绑定到每个<li>，你会得到同样的效果。

那么好处是什么呢?

假设你现在需要通过DOM操作向上面的列表动态添加新的<li>项:

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

如果不使用事件委托，您将不得不将“onclick”事件处理程序“重新绑定”到新的<li>元素，以便它与它的兄弟元素以相同的方式发挥作用。使用事件委托，你不需要做任何事情。只需将新的<li>添加到列表中，就完成了。

这对于带有绑定到许多元素的事件处理程序的web应用程序来说是非常棒的，其中新元素在DOM中被动态创建和/或删除。使用事件委托，可以通过将事件绑定移动到公共父元素来大幅减少事件绑定的数量，并且动态创建新元素的代码可以与绑定其事件处理程序的逻辑分离。

Another benefit to event delegation is that the total memory footprint used by event listeners goes down (since the number of event bindings go down). It may not make much of a difference to small pages that unload often (i.e. user's navigate to different pages often). But for long-lived applications it can be significant. There are some really difficult-to-track-down situations when elements removed from the DOM still claim memory (i.e. they leak), and often this leaked memory is tied to an event binding. With event delegation you're free to destroy child elements without risk of forgetting to "unbind" their event listeners (since the listener is on the ancestor). These types of memory leaks can then be contained (if not eliminated, which is freaking hard to do sometimes. IE I'm looking at you).

下面是一些更好的事件委托的具体代码示例:

JavaScript事件委托如何工作 事件委托与事件处理 delegate是事件委托+选择器规范 jQuery。On在传递选择器作为第二个参数时使用事件委托 没有JavaScript库的事件委托 闭包vs事件委托:查看不将代码转换为使用事件委托的优点 PPK为委派焦点和模糊事件(不会出现气泡)提供了有趣的方法

委托的概念

如果在一个父元素中有许多元素，并且您希望处理其中的事件—不要将处理程序绑定到每个元素。 相反，将单个处理程序绑定到它们的父处理程序，并从event.target获取子处理程序。 这个站点提供了关于如何实现事件委托的有用信息。 http://javascript.info/tutorial/event-delegation