什么是 DOM 事件委托? [英] What is DOM Event delegation?

问题描述

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

Can anyone please explain event delegation in JavaScript and how is it useful?

推荐答案

DOM 事件委托是一种通过事件冒泡"(又名事件传播).

DOM event delegation is a mechanism of responding to ui-events via a single common parent rather than each child, through the magic of event "bubbling" (aka event propagation).

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

When an event is triggered on an element, the following occurs:

事件被分派到它的目标EventTarget 和任何事件监听器发现有触发.冒泡事件将触发任何发现的其他事件侦听器跟随 EventTarget 的父级链向上，检查任何事件在每个注册的听众连续事件目标.这个向上传播将持续到和包括Document.

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.

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

Event bubbling provides the foundation for event delegation in browsers. Now you can bind an event handler to a single parent element, and that handler will get executed whenever the event occurs on any of its child nodes (and any of their children in turn). This is event delegation. Here's an example of it in practice:

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

在该示例中，如果您单击任何子

节点，您会看到 "click!" 警报，即使有没有绑定到您点击的

的点击处理程序.如果我们将 onclick="..." 绑定到每个

你会得到同样的效果.

With that example if you were to click on any of the child <li> nodes, you would see an alert of "click!", even though there is no click handler bound to the <li> you clicked on. If we bound onclick="..." to each <li> you would get the same effect.

那么好处是什么?

假设您现在需要通过 DOM 操作将新的

项动态添加到上述列表中:

Imagine you now have a need to dynamically add new <li> items to the above list via DOM manipulation:

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

如果不使用事件委托，您将不得不将 "onclick" 事件处理程序重新绑定"到新的

元素，为了让它像它的兄弟姐妹一样行事.使用 事件委托，您无需执行任何操作.只需将新的

添加到列表中即可.

Without using event delegation you would have to "rebind" the "onclick" event handler to the new <li> element, in order for it to act the same way as its siblings. With event delegation you don't need to do anything. Just add the new <li> to the list and you're done.

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

This is absolutely fantastic for web apps with event handlers bound to many elements, where new elements are dynamically created and/or removed in the DOM. With event delegation the number of event bindings can be drastically decreased by moving them to a common parent element, and code that dynamically creates new elements on the fly can be decoupled from the logic of binding their event handlers.

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

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).

这里有一些更好的事件委托的具体代码示例:

Here are some better concrete code examples of event delegation:

• JavaScript 事件委托的工作原理
• 事件委托与事件处理
• jQuery.delegate 是事件委托+选择器规范
• jQuery.on 在将选择器作为第二个参数
• 没有 JavaScript 库的事件委托
• 关闭与事件委托:看看不将代码转换为使用事件委托的优点
• 发现了用于委派焦点 和 blur 事件(不会冒泡)

• How JavaScript Event Delegation Works
• Event Delegation versus Event Handling
• jQuery.delegate is event delegation + selector specification
• jQuery.on uses event delegation when passed a selector as the 2nd parameter
• Event delegation without a JavaScript library
• Closures vs Event delegation: takes a look at the pros of not converting code to use event delegation
• Interesting approach PPK uncovered for delegating the focus and blur events (which do not bubble)

这篇关于什么是 DOM 事件委托?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！