jQuery的：被委派總是比直接的功能結合

Question

更好始終是更好地使用$(document).on('click', selector, fn)比$(selector).click(fn)，因爲第一選擇：

1）能夠處理動態創建的元素

2）是網頁加載時更快。 。 對？ （因爲JS不必花費時間對每個選擇器進行查詢和綁定功能）

忘記直接綁定並總是進行授權是否安全？

Answer 1

.on()

優勢

委託事件的優勢在於他們可以處理來自被添加到該文件在稍後的時間 後代元素的事件。通過 挑選一個在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於 ，從而避免需要經常附加和刪除事件處理程序。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。

除了能夠處理尚未創建的後代元素上的事件之外，委派事件的另一個優點是當必須監視許多元素時，它們潛在的開銷要低得多。

性能

附加多個授權的事件處理程序附近的文檔 樹的頂部可能會降低性能。每次事件發生時，jQuery必須 將該類型的所有附加事件的所有選擇器與從事件目標到 文檔頂部的路徑中的每個 元素進行比較。爲獲得最佳性能，請將文檔 位置的委派事件附加到儘可能靠近目標元素的位置。避免過度使用 文檔或document.body來處理大型 文檔上的委派事件。

.click()

此方法是。對一個快捷方式（「點擊」，處理程序）

Answer 2

隨着我的研究，我得出一個結論，一個良好的委託方法比較好比直接綁定。讓我們從乞討中談談。我們知道dom事件會從目標元素中冒泡到它的父母，祖父母，直到document。雖然IE和其他瀏覽器之間有一點區別，但是Jquery event會創建一致的跨瀏覽器行爲。因此，這兩種方法之間的明顯區別在於：

直接綁定事件將發生在目標上（或來自其後代）並冒泡到document，而代理只是冒泡到最外面的綁定目標。請看例子：

$("#myBtn").click(function(){ 
 
    console.log("button was clicked"); 
 
}); 
 

 
document.onclick = function(){ 
 
    console.log("document is clicked"); 
 
}

<div id="testDiv" style="background:darkgrey"> 
 
    <button type="button" id="testBtn">click me</button> 
 
</div>

當單擊該按鈕，document.onclick將被觸發。 然而，如果與委託方法代替，如：

$("#myDiv").on("click", "#myBtn", function(){ 
 
    console.log("myBtn was clicked"); 
 
});

的document.onclick不會被觸發。同時，請注意，點擊最外面的myDiv不會觸發該事件。

這裏講到關鍵點。以良好的方式使用委託方法將極大地提高性能。看到這個例子（從專業的JavaScript突變爲Web開發人員）：

<ul id="myLinks"> 
 
    <li id="goSomewhere"> Go somewhere </li> 
 
    <li id="doSomething"> Do something </li> 
 
    <li id="sayHi"> Say hi </li> 
 
</ul>

傳統的直接綁定的方法是：

$("#goSomewhere").click(function(){ 
 
    window.location.href = "http://sample.com"; 
 
}); 
 

 
$("#doSomething").click(function(){ 
 
    window.title = "I change the title"; 
 
}); 
 

 
$("#sayHi").click(function(){ 
 
    alert("hi"); 
 
});

如果有很多點擊前夕nts，綁定操作的數量將消耗大量的內存以及較長的頁面初始時間。我們可以減去只是一個綁定操作與代表團：

$("#myLink").on("click", function(event){ 
 
    switch(event.target.id){ 
 
     case: "goSomewhere": 
 
     window.location.href = "http://sample.com"; 
 
     break; 
 
     case: "doSomething": 
 
     window.title = "title was changed"; 
 
     break; 
 
     case: "sayHi": 
 
     alert("hi"); 
 
     break; 
 
    } 
 
});

這減少的內存使用。更實用，你可能需要使用一個object更換switch-case模塊的性能，如果有很多的情況下，如：

var eventHandler = { 
 
    goSomewhere: function(){ window.location = "http://sample.com"; }, 
 
    doSomething: function(){ window.title = "title changed"; }, 
 
    sayHi: function(){alert("hi"); } 
 
} 
 
$("#myLink").on("click", function(event){ 
 
    if(eventHandler[event.target.id]) eventHandler[event.target.id](); 
 
});

，因爲JavaScript的對象實際上是一個哈希表。

然後，有一個想法：只需將一個事件附加到document來處理所有事件。這對於mousedown，click，keydown等事件是非常實用的，不適合mouseout，mousein。優點很明顯：我們只綁定一個導致內存減少的事件，容易移除事件處理程序，無需等待文檔就緒事件，因爲document已被顯示，因爲它是子節點script被讀取。聯繫方式，如果您只將每個事件綁定到document，則優勢將消失。

此外，有陷阱，如果採用直接綁定，這個例子從jquery：考慮到與1000行的表：

​​

這一個左撇子附加到1000 tr！但接下來的一個只是一個單一的附件tbody：

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