$(document).on('click') 和 $('p[class="classname"]').on('click') 之间的区别

Question

我有一个这样的元素

<p class="classname">click</p>

我正在使用两种方法来click此p标签

1.

$(document).on('click','p',function(){
   //
});

阿拉伯数字。

$('p[class="classname"]').on('click',function(){
   //
});

这没有问题。这两种方法都可以正常工作。

但是这些方法之间有什么区别。

Answer 1

这个答案的重点是问题中描述的.on()的两种用法之间的差异。不是选择器之间的区别。

两者的区别在于，第一个例子

$(document).on('click','p',function(){
   //
});

利用事件冒泡（或事件委派）。当您的应用程序大量操作 DOM 删除和添加大量元素时，这尤其有用。（例如，Angular 或 Backbone 应用程序使用各自的路由器来切换视图）。

事件

冒泡允许您绑定到较低级别的静态元素，但让事件目标为嵌套元素，该元素可以根据需要多次删除和添加，并保持事件绑定。

你的第二个例子

$('p[class="classname"]').on('click',function(){
   //
});

将事件直接绑定到元素。如果此元素从未更改，则很好。如果在任何时候删除此绑定，则此绑定将丢失，并且在将其重新添加到 DOM 后需要重新声明。至少可以说，这可能是一个乏味的过程。因此，即使在"非动态"元素上，我也总是使用您的第一个选项，以防万一我改变主意。

Answer 2

当您的p元素动态插入时，跟随将不起作用

$('p[class="classname"]').on('click',function(){
   //
});

当p元素动态或最初插入时，跟随将在这两种情况下都起作用。

$(document).on('click','p',function(){
   //
});

参考

Answer 3

第一个示例的另一个好处

$(document).on('click','p',function(){
   //
});

是它将一个事件处理程序绑定到$(document)以处理p元素的所有单击事件。

第二个例子

$('p[class="classname"]').on('click',function(){
   //
});

将为每个匹配元素绑定一个事件处理程序，这可能是很多处理程序。您拥有的事件处理程序越多，页面的速度就越慢。

另请注意，您不必让事件一直冒泡来记录。您可能希望在尽可能早的阶段处理它们，即第一个共同父级。

参考