jQuery .on efficiency

Question

第一个.on函数比第二个更有效吗？

$( "div.container" ).on( "click", "p", function(){
});
$( "body" ).on( "click", "p", function(){
});

问候

Answer 1

来自 jQuery 文档本身关于 jQuery： .on（）：

jQuery可以非常快速地处理表单tag#id.class的简单选择器，当它们用于过滤委托事件时。因此，"#myForm"，"a.external"和"button"都是快速选择器。使用更复杂的选择器（尤其是分层选择器）的委托事件可能会慢几倍 - 尽管它们对于大多数应用程序来说仍然足够快。通常，只需将处理程序附加到文档中更合适的点即可避免分层选择器。例如，使用 $

（ "#commentForm" ）.on（ "click"， "#commentForm .addNew"， addComment 代替 $（ " ）.on（ "click"， ".addNew"， addComment ）。

Answer 2

第一个选择器越窄，性能越好。

但是我想第一个示例不起作用，因为您正在监视具有container类<p>中的所有<p>容器，并且由于是措辞内容，<p>不能包含另一个<p>。

Answer 3

当然，因为浏览器只需要监视一个段落的点击事件，而不是整个页面。