Jquery 车身上的点击事件与为fruture重新绑定的性能

我有两个选择：

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

$（“按钮”）。在（'click'，function（）上{
$（“#myDiv”）。前置（“新段落”
”；
});
$（'body'）。在（'click'，'p'，function（）上{
log（'点击段落'）；
});

或

$（“按钮”）。在（'click'，function（）上{
$（“#myDiv”）。前置（“新段落”
”；
$（“p”）。在（'click'，function（）上{
log（'点击段落'）；
});
});

---

---

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

老实说，除非你多次这么做，否则差异不会明显。我想说第二种解决方案更干净，但我会对其进行修改，这样就不会妨碍您出于不可点击的目的使用p标签：

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

---

无需担心委托事件处理程序的速度。速度上的差异是浏览器将事件传播到祖先（琐碎）所需的时间，以及jQuery根据事件的实际路径（同样琐碎）检查该事件（

body

）上已注册委托处理程序的选择器所需的时间

但请注意，实际元素上的处理程序首先被触发，因此它们有机会在事件到达

主体之前停止事件。这通常是委托处理人最大的麻烦


但是请注意，您的第二个代码段有一个问题：每次添加一个段落时，您都在现有段落上设置一个
click
处理程序，包括已经设置了click处理程序的段落！您可能希望避免这种情况。：-）

如果要使用第二个示例但避免该问题，可以执行以下操作：

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

$（“按钮”）。在（'click'，function（）上{
$（“新段落
”）.prependTo（“#myDiv”）.on（'click'，function（）{
log（'点击段落'）；
});
});
谢谢。我会坚持第一个。
$("button").on('click',function(){
   $('<p>new paragraph</p>').prependTo("#myDiv").on('click',function(){
      console.log('clicked paragraph');
   });
});