$(文件).on('点击')和$(' p [class =" classname"]')之间的区别。('点击')

时间:2015-01-31 06:51:06

标签: javascript jquery

我有一个像这样的元素

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

我在此click代码

上使用两种p方式

1

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

2

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

这方面的工作没有问题。这两种方法都很好。

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

3 个答案:

答案 0 :(得分:3)

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

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

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

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

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

你的第二个例子

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

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

答案 1 :(得分:1)

当您的p元素动态插入后,将无效

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

当动态或最初插入p元素时,以下两种情况都会起作用。

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

<强> Reference

答案 2 :(得分:0)

第一个例子的另一个好处

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

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

第二个例子

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

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

另请注意,您不必让事件一直冒泡到文档。您可能希望在尽可能早的阶段处理它们,这是第一个共同的父母。

Reference