javascript - 什么是 DOM 事件委托(delegate)？

Question

谁能解释一下 JavaScript 中的事件委托(delegate)以及它有什么用处？

Answer 1

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

当元素上触发事件时，the following occurs :

The event is dispatched to its target EventTarget and any event listeners found there are triggered. Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward, checking for any event listeners registered on each successive EventTarget. This upward propagation will continue up to and including the Document.

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

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

在该示例中，如果您要单击任何子 <li>节点，您将看到 "click!" 的警报，即使没有绑定(bind)到 <li> 的点击处理程序你点击了。如果我们绑定(bind) onclick="..."给每个<li>你会得到同样的效果。

那么有什么好处呢？

假设您现在需要动态添加新的 <li>通过 DOM 操作将项目添加到上述列表中:

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

如果没有使用事件委托(delegate)，您将不得不“重新绑定(bind)”"onclick"新的 <li> 的事件处理程序元素，以便它的行为与其 sibling 相同。 使用事件委托(delegate)，您不需要做任何事情。只需添加新的 <li>到列表中，你就完成了。

这对于具有绑定(bind)到许多元素的事件处理程序的 Web 应用程序来说绝对很棒，其中新元素在 DOM 中动态创建和/或删除。通过事件委托(delegate)，事件绑定(bind)的数量可以通过将它们移动到一个公共(public)的父元素来大幅减少，并且动态创建新元素的代码可以与绑定(bind)其事件处理程序的逻辑分离。

事件委托(delegate)的另一个好处是事件监听器使用的总内存占用减少了(因为事件绑定(bind)的数量减少了)。对于经常卸载的小页面(即用户经常导航到不同的页面)，它可能没有太大的区别。但对于长期存在的应用程序来说，它可能很重要。当从 DOM 中删除的元素仍然占用内存(即它们泄漏)时，有一些非常难以追踪的情况，并且这种泄漏的内存通常与事件绑定(bind)相关联。使用事件委托(delegate)，您可以自由地销毁子元素，而不会忘记“解除绑定(bind)”它们的事件监听器(因为监听器在祖先上)。然后可以控制这些类型的内存泄漏(如果不消除，有时很难做到。IE 我在看着你)。

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

• How JavaScript Event Delegation Works
• Event Delegation versus Event Handling
• jQuery.delegate是事件委托(delegate)+选择器规范
• jQuery.on将选择器作为第二个参数传递时使用事件委托(delegate)
• Event delegation without a JavaScript library
• Closures vs Event delegation :看看不将代码转换为使用事件委托(delegate)的优点
• 为 delegating the focus and blur events 发现了有趣的 PPK 方法(这不会冒泡)