我有一个像这样的元素
<p class="classname">click</p>
我在此click
代码
p
方式
1
$(document).on('click','p',function(){
//
});
2
$('p[class="classname"]').on('click',function(){
//
});
这方面的工作没有问题。这两种方法都很好。
但这些方法之间有什么区别。
答案 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(){
//
});
将为每个匹配元素绑定一个事件处理程序,这可能是很多处理程序。而且你拥有的事件处理程序越多,页面就越慢。
另请注意,您不必让事件一直冒泡到文档。您可能希望在尽可能早的阶段处理它们,这是第一个共同的父母。