性能差（）函數

Question

我只是想知道哪種方法更有效，或者是否有VS在這種操作的成本有什麼區別...

A) $(document).on('click', '#lol', function(){alert('hello')}) 

B) $('#lol').on('click', function(){alert('hello')}) 

我知道如果在執行ready函數後，ID爲'lol'的元素被附加到DOM，後者將無法工作。我只是將採用實現A的方式作爲最佳實踐，因爲無論我定位的元素如何，它都會保持所有事件代碼相同。所以我想知道使用選項A總是有缺點嗎？

Answer 1

是的，您應該儘可能不要使用document，而應使用更接近目標的元素。

從on() docs（重點煤礦）：

附加附近的文檔 樹的頂部許多委派的事件處理程序會降低性能。每次事件發生時，jQuery必須 將該類型的所有附加事件的所有選擇器與從事件目標到 文檔頂部的路徑中的每個 元素進行比較。 爲了獲得最佳性能，請將文檔 位置處的委派事件附加到儘可能靠近目標元素的位置。避免過度使用 文檔或document.body來處理大型 文檔上的委派事件。

Answer 2

@ j08691的答案是在一個或網頁上的幾個要素的情況下完美的，但如果我們結合點擊頁面上的事件，成千上萬的元素，像有數百行的表中的所有TD元素，然後第二個選項會比較慢，因爲jquery同時在監聽1000個事件，但第一個選項只監聽一個事件，那就是主體的點擊。 請看一看的委派事件好處。對（）文檔在這裏： http://api.jquery.com/on/

除了他們來處理後代元素事件的能力 尚未創建，委派另一優勢事件是他們的 潛在的低得多的開銷，當許多元素必須 監測。與在其TBODY 1000行數據表中，這個例子 附加一個處理程序，以1000元：