JavaScript什么是DOM事件委托？

• Z时代
• 2024-01-10
• 分类：问答

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

回答：

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>你将获得相同的效果。

那有什么好处呢？

假设你现在需要

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