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

Question

我有这样一个元素

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

我使用两种方式点击这个p标签

1.

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

2.

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

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

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

Answer 1

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

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

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

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

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

你的第二个例子

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

将事件直接绑定(bind)到元素。如果这个元素永远不会改变，这很好。如果它在任何时候被删除，这个绑定(bind)就会丢失，并且一旦它被重新添加到 DOM 就需要重新声明。这至少可以说是一个乏味的过程。因此，我总是使用您的第一个选项，即使是在“非动态”元素上也是如此，以防我改变主意。