jQuery 中的直接事件處理與委託事件處理：您應該選擇哪一種「.on()」方法？

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

jQuery .on() 方法允許註冊事件處理程序在DOM 元素上。事件處理的兩種不同方法是直接綁定和委託綁定。直接綁定將事件處理程序直接附加到特定元素，而委託綁定允許對與父元素中的選擇器相符的元素進行事件處理。

有關委託事件處理程序的給定段落的最後一句指出 jQuery「運行任何元素的處理程序...與選擇器匹配。」這是指 DOM 中的事件冒泡機制。

當使用 .on() 和選擇器將委託事件處理程序附加到父元素時，事件不僅會在選定元素上處理，還會在其後代元素上處理與選擇器匹配。當事件在 DOM 樹中冒泡時，jQuery 檢查路徑上是否有任何元素與選擇器匹配，如果找到匹配則觸發處理程序。

為了說明差異，請考慮以下範例：

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

這直接將點擊處理程序綁定到所有 #target div 中具有綠色類別的元素。這些元素中的每一個都將獨立處理單擊事件。

相反，以下元素使用委託綁定：

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

這裡，點擊事件處理程序附加到#target div，但選擇器“事件冒泡”到匹配“綠色”的元素。這意味著任何未來的在 #target div 中建立的具有「green」類別的元素也會觸發點擊處理程序。

在從頁面動態新增和刪除元素時，委託綁定特別有用，因為它確保新元素繼承事件無需手動綁定即可處理行為。

以上是jQuery 中的直接事件處理與委託事件處理：您應該選擇哪一種「.on()」方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！