jQuery .on（）與事件委託中的多個選擇器？

Question

我在jQuery 1.7中使用了.on()，並想知道是否可以一次將多個選擇器附加到已經注入頁面的元素。以前，我使用的是live() - 但很明顯，爲什麼我想要改進性能。

你能在喜歡的方式使用.on()：

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

，並在那裏安裝到​​記錄丟失的任何好處？

？

Answer 1

1. 你可以使用。對（）的方式，如：

   $(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

這是可能的，「this」是單擊的選擇器，而不是文檔。

你最好附加到你的選擇器的最接近的父元素。當你點擊'＃selector1'時，這個事件冒泡到事件處理器元素，在這裏：document。

層越多，動作越多。而且，如果在selector1和document之間有另一個click事件處理程序，它可以被event.stopPropagation();攔截，並且永遠不會到達「document」事件處理程序。

你可以檢查流氓事件「攔截」in this fiddle。