jQuery .on（）在事件委托中有多个选择器？

Question

我在jQuery 1.7中使用了.on()，并想知道是否可以为已注入页面的元素一次附加多个选择器。以前，我使用的是live() - 但很明显，为什么我希望在性能改进的情况下采取行动。

您可以像以下方式使用.on()：

$(document).on('click', '#selector1, #selector2, .class1', function () { 
     //stuff
});

附加到文档是否有任何好处？

Answer 1

1.   

   你能以这样的方式使用.on（）：

   $(document).on('click', '#selector1, #selector2, .class1', function () { 
       //stuff
   });
   

   Yes, that will work.

2.   

   我希望在给定性能改进的情况下使用此代替live()。

   与使用live()相比，使用该代码段有无性能优势，因为live()本身会将事件绑定到文档，而在jQuery 1.7中，实时调用幕后on。

3.   

   附加到文档是否有任何好处？

   绑定到document的缺点是事件必须在处理之前遍历整个祖先列表;这个as pointed out in the jQuery documentation是最慢的路线。最好通过将处理程序附加到更靠近事件源的元素来更快地处理事件。

Answer 2

它可能和＆＃34;这个＆＃34;是单击的选择器，而不是文档。

最好附加到选择器最近的父元素。当您点击＆＃39;＃selector1＆＃39;时，事件会冒泡到事件处理程序元素，此处为：document。

层越多，动作越多。此外，如果在selector1和document之间有另一个click事件处理程序，它可以被event.stopPropagation();拦截，并且永远不会到达＆＃34;文档＆＃34;事件处理程序。

你可以查看流氓事件＆＃34;拦截＆＃34; in this fiddle