试图了解事件之间的jQuery的区别

Question

我了解有几种方法可以绑定到jquery中的事件，我担心的是这两种方法。

这是我的理论标记：

<div id="closerToTheButton">
     <button id="someID"></button>    
</div>

以及可能的js选项：

$(document).on('click', '#someID', function(){
   // do work
});

和：

$('#closerToTheButton').on('click', '#someID', function(){
       // do work
});

我了解如果存在ID以外的选择器，它们之间的区别，但是ID的确有区别吗？ 有性能提升吗？ 哪一个是首选？

Answer 1

是的，第二个选项对性能更好，因为该事件绑定到#closerToTheButton元素而不是整个文档，因此仅单击#someID元素内的#closerToTheButton元素将触发该功能。 （这也是在功能上略有区别-如果#someID不是的后代#closerToTheButton ，点击它不会闪光功能。）

Answer 2

区别在于将click事件应用于文档，如果在创建DOM之后运行此代码，则始终会捕获该事件。 现在应用事件对象# closerToTheButton ，只有当您在执行代码时该元素存在于DOM中时，才会捕获该对象。 如果已在运行代码后动态创建了该事件，则不会捕获click事件。

在性能方面，如果您不是动态创建元素，则第二个选项比第一个更好，因为不必在整个DOM中搜索元素# someID 。

Answer 3

出于性能方面的考虑，您应始终绑定到最接近的静态祖先 ，这些祖先覆盖了要将委托事件处理程序附加到的所有元素。