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()); 
 
});