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

问题描述

任何人都可以用JavaScript解释事件委托，它如何有用？

解决方案

DOM事件委托是一种响应机制通过一个共同的父母，而不是每个孩子，通过事件冒泡（也就是事件传播）的魔力来传播事件。

当一个事件被触发时元素，发生以下情况 ：

事件被发送到目标
EventTarget 和任何事件听众
发现有触发。 冒泡
事件将触发任何
附加的事件监听器
发现code> EventTarget 的父
chain 向上，检查每个
连续的EventTarget上注册的任何事件
监听器。

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

 < ul onclick = alert（event.type +'！'）> 
< li> One< / li> 
< li> Two< / li> 
< li> Three< / li> 
< / ul> 
  

有了这个例子，如果你点击任何一个孩子 li> 节点，即使没有点击处理程序绑定到click！的警报>< li> 您点击了。如果我们将 onclick =...绑定到每个< li> ，您将获得相同的效果。 / p>

那么有什么好处？

想象你现在有需要动态添加新的< li> 项目通过DOM操作到上述列表：

  var newLi = document.createElement（'li'）; 
 newLi.innerHTML ='Four'; 
 myUL.appendChild（newLi）; 
  

没有使用事件委托，你必须重新绑定code>onclick事件处理程序到新的< li> 元素，以使其行为与其兄弟姐妹一样。 使用事件委派你不需要做任何事情。只需将新的< li> 添加到列表中即可。

具有事件处理程序的Web应用程序绑定到许多元素，在DOM中动态创建和/或删除新元素。使用事件委托，可以通过将事件绑定的数量移动到公共父元素来大大减少事件绑定的数量，并且可以将动态创建新元素的代码与绑定其事件处理程序的逻辑解耦。

事件委托的另一个好处是事件侦听器使用的总内存占用率下降（因为事件绑定的数量下降）。对于经常卸载的小页面（即用户经常浏览不同的页面）可能不会有太大的不同。但对于长期存在的应用程序来说，这是很重要的。当从DOM移除的元素仍然声明内存（即它们是泄漏的）时，存在一些非常难以追踪的情况，并且这种泄漏的内存通常与事件绑定有关。通过事件委托，您可以自由地销毁子元素，而不会忘记解除绑定其事件侦听器的风险（因为侦听器在祖先上）。这些类型的内存泄漏可以被包含（如果没有被消除，这有时候很难做）IE我在看你）。

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

• JavaScript事件代表如何工作


• 事件委托与事件处理


• jQuery.delegate 是事件委托+选择器规范


• jQuery。通过选择器作为第二个参数时，使用事件委托


• 没有JavaScript库的事件委托


• 关闭与事件委托：看看不转换代码以使用事件委托


• 有趣的方法PPK发现委派焦点和 blur 事件（其中不气泡）

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

解决方案

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:

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>

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.

So what's the benefit?

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

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.

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.

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:

• 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屋！