jQuery的「*上點擊功能*」

Question

我這個代碼掙扎：

選擇html元素，然後點擊功能應用是什麼tr目的後。

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
}); 

Answer 1

的TR的目的是爲了說明什麼，你會在#dataTable tbody選擇內點擊。嘗試改變它到別的地方，看看它的行爲有什麼不同。

Answer 2

有之間細微的差別：

$("#dataTable tbody tr").on("click", callback); // 1 

和

$("#dataTable tbody").on("click", "tr", callback); // 2 

第一個選擇每tr和單獨調用每個addEventListener。

第二個只向tbody元素添加一個特殊事件偵聽器。只要點擊了內部的某個內容，此偵聽器就會檢查它是否爲tr，然後將該事件委託給指定的回調。

這給了2個實際差別：

• 一個偵聽器添加，而不是潛在的非常多（這可以提高在某些情況下的性能），
• 如果你添加更多tr小號動態的未來，他們也會像你期望的那樣對click做出反應。

Answer 3

活動氣泡。這是你需要理解的主要內容。如果用戶點擊a內部的p內部的td一個tr內部的table（等）內部，點擊事件將每個冒泡這些元素的和觸發反過來所有click事件偵聽器。

$("#dataTable tbody").on("click", "tr", function() { 

此選擇了#dataTable tbody元素附加事件監聽器，但它會過濾，只反應以通過嵌套tr觸發的事件。你也可以這樣做，而不是：

$("#dataTable tbody tr").on("click", function() { 

但這將結合許多單獨的事件監聽器給每一位tr。這可能效率更低或者具有其他不良影響;例如，如果您不斷添加或刪除tr元素，則最終可能會有一些tr，它們將事件偵聽器綁定到它們，而其他事件偵聽器則沒有。