Question

我理解事件委派是能够处理从父元素到其子元素的事件的传播。事件处理是否能够将“事件处理程序”分配给元素？

编辑：我也找到了"this explanation"，但它已经超出了我的想法。

Answer 1

“事件处理”是指以您选择的任何方式处理事件。

“事件委托”是一种特殊的事件处理，其中元素父级的事件处理程序处理该元素的事件。常规事件处理没有区别，它只是明确地描述了让事件冒泡以在原始目标之外的另一个元素处理的情况。

这在实践中看起来像这样：

<div id="foo">
    <a href="#">Bar</a>
</div>

事件处理程序将附加到div#foo并捕获所有事件，例如click个事件。当事件处理程序捕获此类事件时，它会检查event.target以查看事件是否源自所需的源，例如a元素。如果确实如此，则会执行某些操作，否则会忽略该事件。这将是作为div#foo的委托处理click事件的父（a）的示例。 div#foo处理由其子a触发的事件。 a将事件处理委托给div#foo，它本身不处理它们。

_{请注意，当我说“a处理事件”时，这是“附加到a处理事件的事件处理程序”的简短描述。：）}

Answer 2

事件处理只是一个通用术语，意思是“处理事件” 事件委托主要与jQuery.deleate方法有关，现在已弃用。这完全是关于事件传播。这意味着处理其他节点上的事件。 事件传播是关于事件如何从发生故障的节点传播到更高级别或更低级别的节点。实际上有两种传播模式：冒泡（向上）和捕获（向下）。

DOM Events的standard提供了两种模型。但并非所有浏览器都支持它们。希望像jQuery这样的库经常隐藏兼容性差异。

另请参阅：http://www.quirksmode.org/js/events_order.html

Answer 3

“事件处理”：通常使用addEventListner或其他任何方法来处理事件。

“事件委托”：这是一种利用事件冒泡来优化代码的方法。

假设您有很多子元素是动态生成的，并且每个元素都需要一个事件侦听器。最终将导致性能问题。因此，我们应该在事件冒泡的帮助下采用更好的方法。

我提供了一个简单的示例来理解。在不将事件侦听器附加到每个子元素的地方，我们仍然可以访问子元素的数据。

if list1[0] == list2[0]:
    result = list1[1] + list2[1]

document.querySelector("#category").addEventListener('click', (e) => {
  console.log(e.target.id);

})

javascript中的“事件委托”和“事件处理”这两个术语有什么区别？

3 个答案: