jQuery 中的直接事件處理與委託事件處理：我什麼時候該使用哪一個？

使用jQuery .on() 進行直接事件處理與委託事件處理

當使用jQuery .on() 方法進行事件處理時，有是直接事件處理程序和委託事件處理程序之間的根本區別。

直接事件處理程序，如其名稱所示，attach事件偵聽器直接指向特定元素。例如：

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

在此場景中，按一下事件偵聽器直接綁定到 div#target 容器內的每個 span.green 元素。

另一方面，委託事件處理程序，將事件偵聽器附加到父元素，並將事件處理委託給與選擇器相符的後代元素。例如：

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

這裡，點擊事件偵聽器附加到 div#target 容器，然後將點擊處理委託給任何後代的 span.green 元素。

鍵區別在於，在委託事件處理中，如果事件直接發生在父元素上，則不會呼叫處理程序。相反，事件會在 DOM 樹中向上冒泡，並且僅針對與所提供的選擇器匹配的後代元素呼叫處理程序。這對於可能新增或刪除新元素的動態內容是有益的，因為事件偵聽器將自動應用於任何匹配的後代，而不需要明確綁定。

在提供的範例中，直接事件和委託事件處理程序會導致相同的行為，因為沒有新增或刪除動態元素。但是，如果新的 span.green 元素動態新增至頁面，則只有委託的事件處理程序才會處理它們的按一下事件。

以上是jQuery 中的直接事件處理與委託事件處理：我什麼時候該使用哪一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！