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

jQuery .on() 中的直接事件處理與委託事件處理

jQuery .on() 方法提供了兩種事件處理選項：直接和委託。在委託處理的上下文中，文件指出，當事件直接發生在綁定元素上時，不會呼叫事件處理程序，而僅針對與選擇器匹配的後代。然而，這提出了「為任何元素運行處理程序」到底是什麼意思的問題。

直接事件處理

在直接事件處理中，事件處理程序使用以下語法直接分配給元素：

$("selector").on("event", function() {...});

在這種情況下，事件處理程序將附加到與選擇器相符的每個元素。例如，以下程式碼為每個 指派一個點選處理程序。

中具有綠色類別的元素帶有id 目標：

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

委託事件處理

在委託事件處理中，使用以下語法將事件處理程式分配給父元素：

$("parent").on("event", "child selector", function() {...});

在這種情況下，事件處理程序被分配給父元素，但它只響應後代元素上發生的事件與子選擇器匹配的元素。此方法對於將事件處理程序附加到頁面最初載入時不存在的動態內容非常有用。

請考慮以下範例：

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

在此範例中，附加了按一下處理程序至

;與 id 目標。但是，它僅響應 的後代元素上發生的點擊。

關鍵差異

直接事件處理和委託事件處理之間的關鍵區別在於目標元素和處理事件的元素之間的關係。在直接事件處理中，目標元素也是處理事件的元素。在委託事件處理中，目標元素是處理事件的元素的父元素。

實際意義

通常，在使用委託事件處理時，首選可以隨時間變化的動態內容。透過將事件處理程序附加到父元素，您可以確保即使將新元素新增至頁面也能處理事件。直接事件處理較適合不會隨時間變化的靜態內容。

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