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

出于性能原因，您应始终绑定到最接近的静态祖先（或祖先），其中包含您要将委托事件处理程序附加到的所有元素。

试图理解jquery事件之间的区别

3 个答案: