JavaScript什么是DOM事件委托？

小编典典

JavaScript什么是DOM事件委托？

spring

谁能用JavaScript解释事件委托，它有什么用？

阅读 590

2020-04-23

共1个答案

小编典典

DOM事件委派是一种机制，它通过事件“冒泡”（也称为事件传播）的魔术，通过单个公共父节点而不是每个子节点来响应ui事件。

在元素上触发事件时，将发生以下情况：

事件被调度到其目标，EventTarget并且在该目标中找到的所有事件侦听器都会被触发。然后，冒泡事件将触发所有其他事件侦听器，这些事件侦听器可通过向上跟随EventTarget的父链来查找在每个连续EventTarget上注册的任何事件侦听器。这种向上传播将持续到并包括。Document

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

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

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

那有什么好处呢？

假设你现在需要

通过DOM操作将新项目动态添加到上述列表中：

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

如果不使用事件委托，则必须将”onclick”事件处理程序“重新绑定” 到新

元素，以使其与兄弟元素相同。使用事件委托，你无需执行任何操作。只需将新添加

到列表中就可以了。

对于将事件处理程序绑定到许多元素的Web应用程序来说，这绝对是太棒了，在DOM中动态创建和/或删除了新元素。通过事件委托，可以通过将事件绑定移到公共父元素上来大大减少事件绑定的数量，并且可以动态地动态创建新元素的代码与绑定事件处理程序的逻辑脱钩。

事件委派的另一个好处是事件侦听器使用的总内存占用量减少了（因为事件绑定的数量减少了）。对于经常卸载的小页面（即用户经常导航到不同的页面）可能没有太大的区别。但是对于寿命长的应用程序而言，这可能意义重大。当从DOM中删除的元素仍然需要内存（即它们泄漏）时，确实存在一些很难追踪的情况，并且这种泄漏的内存通常与事件绑定相关联。使用事件委托，你可以自由销毁子元素，而不必忘记“取消绑定”其事件侦听器的风险（因为侦听器在祖先上）。然后可以遏制这些类型的内存泄漏（如果不消除，有时会很难做到。即IE，我正在看着你）。

2020-04-23