用於添加動態添加元素事件的$（document）和$（'parentSelector'）的區別？

Question

我很困惑$（文檔）在使用這個作爲我的選擇click event？任何差異或成本，而不是隻使用父母選擇器？ 他們都產生相同的輸出，但是有什麼因素像執行速度？

您可以測試這個FIDDLE

var counter = 0; 

使用父選擇

$(".parent").on("click", "button.btn", function(){ 
     $(".parent").append("<button class = 'btn'> new button " + (++counter) + "</button><br />"); 
    }); 

或$（文件）

$(document).on("click","button.btn",function(){ 
     $(".parent").append("<button class = 'btn'> new button " + (++counter) + "</button><br />"); 
    }); 

Answer 1

您需要提供最接近的括號t選擇器不能動態生成，並且需要事件委派的所有未來元素都應該是靜態父元素的子元素。

當涉及到性能時，與附加到頁面的文檔或主體相比，將事件委託給最近的靜態父項更爲可行。

Answer 2

通常應該綁定到包含要委派給的動態元素的限制最多的元素。委託的工作方式是每當事件發生在綁定元素的任何位置時，就會運行一個內部jQuery處理程序。該處理程序執行檢查以查看目標是否匹配選擇器參數，如果是，則調用您的處理函數。

所以，如果你使用$(document).on，它將不得不這樣做，只要你點擊在頁面上。但是，如果您使用$(".parent").on，則只需在父元素內單擊時執行檢查。這在瀏覽器上的開銷較少。

此外，委託依賴於冒泡到您綁定到的元素的事件。如果有一個包含button.btn的元素，並且它有一個調用event.stopPropagation()的點擊處理程序，這將取消冒泡，並且jQuery的內部處理程序將永遠不會運行。綁定到父母應該使這不太可能。