javascript 中的“事件委托”和“事件處理”這兩個術語有什么區別？

Question

我知道事件委托是能夠處理從父元素到其子元素的事件的傳播。 事件處理是否只能將“事件處理程序”分配給元素？

編輯：我也找到了“這個解釋” ，但它超出了我的頭腦。

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.deletate 方法有關。 這都是關於事件傳播的。 這意味着處理其他節點上的事件。 事件傳播是關於事件如何從它發生的節點傳播到更高級別或更低級別的節點。 實際上有兩種傳播模型：冒泡（向上）和捕獲（向下）。

DOM 事件標准提供了這兩種模型。 但並非所有瀏覽器都支持它們。 希望像 jQuery 這樣的庫經常隱藏兼容性差異。

另見： http : //www.quirksmode.org/js/events_order.html

Answer 3

“事件處理”：處理事件，通常使用 addEventListner 或任何東西。

“事件委托”：這是一種利用事件冒泡來優化代碼的方式。

假設您有很多動態生成的子元素，並且每個子元素都需要一個事件偵聽器。 最終會出現性能問題。 所以我們應該在事件冒泡的幫助下繼續使用更好的方法。

我提供了一個簡單的例子來理解。 在不為每個子元素附加事件偵聽器的情況下，我們仍然可以訪問子元素的數據。

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

 <div> <ul id="category"> <li id="Grocery">Grocery</li> <li id="Electronics">Electronics</li> <li id="Dress">Dress</li> </ul> </div>