Question

我有两个选择：

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

OR

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

哪个会更快？这两种方法都有任何已知问题吗？

Answer 1

无需担心委派事件处理程序的速度。然而，速度的差异很长，它需要浏览器将事件传播到祖先（平凡），然后是jQuery检查选择器上该祖先的注册委托处理程序的时间（在您的情况下为body）反对事件的实际路径（也很简单）。

但请注意，实际元素的处理程序首先被触发，因此他们有机会在事件到达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');
 });

关于身体上的点击事件与将来重新绑定的表现

2 个答案: