jquery - 身体上点击事件的性能与结果的重新绑定

Question

我有两个选择：

$("button").on('click',function(){
   $("#myDiv").prepend('<p>new paragraph</p>');
});
$('body').on('click','p',function(){
   console.log('clicked paragraph');
});

或者

$("button").on('click',function(){
   $("#myDiv").prepend('<p>new paragraph</p>');
   $("p").on('click',function(){
      console.log('clicked paragraph');
   });
});

---

哪个会更快？这两种方法是否存在任何已知问题？

Answer 1

无需担心委托事件处理程序的速度。速度上的差异是浏览器将事件传播到祖先（微不足道）所花费的时间，然后是 jQuerybody根据实际路径检查该祖先（在您的情况下）上注册的委托处理程序的选择器所花费的时间事件发生（也是微不足道的）。

但请注意，实际元素上的处理程序首先被触发，因此他们有机会在事件到达body. 这通常是委托处理程序的最大麻烦。

---

请注意，您的第二个代码片段有一个问题：每次添加段落时，您都会click在现有段落上设置处理程序 - 包括您已经放置点击处理程序的段落！你可能想避免这种情况。:-)

如果您想使用第二个示例但避免该问题，您可以这样做：

$("button").on('click',function(){
   $('<p>new paragraph</p>').prependTo("#myDiv").on('click',function(){
      console.log('clicked paragraph');
   });
});

Answer 2

老实说，除非你做了很多很多次，否则差异不会很明显。我会说第二个解决方案更干净，但我会对其进行修改，以免阻止您将 p 标签用于不可点击的目的：

$("#myDiv").find('p').on('click',function(){
    console.log('clicked paragraph');
 });