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

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

jQuery 的.on() 方法提供了兩種不同的事件處理方法：直接並委託。差別在於事件處理的範圍。

直接事件處理

在直接事件處理中，事件處理程序直接綁定到目標元素。這意味著僅當事件直接發生在該元素上（而不是其任何後代上）時才會執行處理程序。例如：

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

委託事件處理

在委託事件處理中，事件處理程序綁定到祖先元素，選擇器指定該元素的後代元素應該觸發處理程序。這允許處理程序處理指定範圍內任何地方發生的事件。例如：

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

關鍵區別在於，在情況 1 中，每個跨度直接負責處理自己的事件。在情況 2 中，容器元素 (div#target) 被委託負責處理其子元素 (span.green) 的事件。

範例比較

提供的範例示範了在 div#target 中點擊綠色跨度的上下文中直接事件處理和委託事件處理之間的差異。兩種方法都實作了相同的行為，即提醒點擊的跨度的類別。

直接方法：

• 每個綠色跨度都綁定到其自己的單擊事件處理程序。
• 在div#target 中創建的新綠色跨度將不會綁定事件處理程序

委託方法：

• 事件處理程序綁定到div#target，使用span.green 作為委託選擇器。
• 點擊 div#target 中任何現有或未來的綠色跨度將已處理。
• div#target 負責代表其所有與 span.green 相符的子元素處理事件。

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