是$（document）.on（event，'#id .class'）比$（document）.on（event，'.class'）更快

-2

所以我知道如果你用查詢元素，它比僅有班級的速度更快。在動態創建元素的案例綁定事件中，這是否正確。例子：

$(document).on('click', '#id .class', someFunction);

$(document).on('click', '.class', someFunction);

假設我有真的有很多我的網頁上元素。當我點擊對上面的函數綁定的元素，將第一個方法調用someFunction比第二個方法更快？

來源

2015-07-13 Saitama

差異幾乎肯定是無關緊要的。但如果不是這樣，只需花費5分鐘，然後運行一些測試以找出答案。 –

我認爲jQuery使用'document.querySelectorAll（）'與新的瀏覽器無論如何。這是內置在瀏覽器中。 –

https://learn.jquery.com/performance/optimize-selectors/ – epascarello

如果您瞭解委託事件處理如何在jQuery中工作，那麼您的第一個版本只是爲事件處理系統做更多工作。正如其他人所說的那樣，你將不得不進行一些測試，以查看這種差異是否可以測量，更不是那麼重要。

爲了幫助你理解，這裏的委託事件處理這是如何工作的：

$(document).on('click', '#id .class', someFunction);

爲click事件的事件處理程序註冊的document對象。然後，只要點擊事件冒泡到document對象，就會調用jQuery系統，並且必須檢查事件目標是否與選擇器匹配。這是一個工作。首先必須查看對象本身（或父對象）是否匹配.class，那麼它必須從其找到匹配的位置搜索父鏈，看它是否找到#id。

您的第二個版本不必搜索#id的母鏈。所以，如果是不需要只針對準確你想要的物品，那麼你應該去與你的第二個選項：

$(document).on('click', '.class', someFunction);

，只是因爲它使代碼做的工作較少。

來源

2015-07-13 01:39:37 jfriend00

我很確定jQuery必須檢查單擊的元素是否也有這個元素作爲它的父元素，也就是說，你點擊''按鈕'內的'span'，但'button'是'$ .fn中使用的選擇器。上（）'。 – alex

@alex - 是的，如果點擊的元素不匹配'.class'，那麼它也會檢查父級，看看這個類是否被繼承。但無論哪種方式，如果不需要準確定位，'＃id'就會增加更多工作。 – jfriend00

是$（document）.on（event，'#id .class'）比$（document）.on（event，'.class'）更快

回答

相關問題