在（）上使用jQuery時，為什么要使用（document）與元素本身？

Question

我想用一個jQuery專家來解釋為什么$（文檔）標識符被其他人推薦用於jQuery的on（）語句而不僅僅是使用元素本身

示例1：為什么在這里使用$（document）比Example＃2更好？

$(document).on("click", ".areaCodeList a", function(){
    // do stuff
});

示例2：與示例1相比，為什么使用這種方式考慮不好的做法？

$(".areaCodeList a").on("click", function(){
    // do stuff
});

Answer 1

這兩個都是有效的。

前者適用於動態添加的元素。 您使用document是因為您要委托文檔對象的子項上的事件，因此事件會冒泡到文檔級別。 選擇最接近的父級（並且父級必須在加載時必須存在於頁面上）也更方便。

后者仍然有效，並且是將事件簡單地綁定到特定元素的首選方式。

我個人不建議通過document對象進行委派，而是建議在頁面加載時使用最近的父對象。

以下是on()的文檔。

Answer 2

這不是真的。

這兩行完全是兩件事。

第一行是具有".areaCodeList a"選擇器的委托事件，而第二行是附加到".areaCodeList a"元素的事件。

委托事件將觸發每個".areaCodeList a"元素，盡管它在執行該行時位於DOM中。

無論如何，根本不建議將委托事件附加到document中。 如live文檔中所述：

由於所有.live（）事件都附加在文檔元素上，因此事件在處理之前會采用最長和最慢的路徑

請閱讀on 文檔 ：

事件處理程序僅綁定到當前選定的元素; 它們必須存在於您的代碼調用.on（）時的頁面上。 要確保元素存在且可以選擇，請在文檔就緒處理程序內對頁面上HTML標記中的元素執行事件綁定。 如果將新HTML注入頁面，請在將新HTML放入頁面后選擇元素並附加事件處理程序。 或者，使用委托事件來附加事件處理程序，如下所述。

委托事件的優點是，它們可以處理來自稍后添加到文檔的后代元素的事件。 通過選擇在附加委托事件處理程序時保證存在的元素，您可以使用委派事件來避免頻繁附加和刪除事件處理程序。 例如，此元素可以是模型 - 視圖 - 控制器設計中視圖的容器元素，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。 在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此可以安全地將事件附加到那里而無需等待文檔准備就緒。
...
...

Answer 3

我認為你混淆了一些概念。 不建議綁定到document元素，但有時您希望這樣做，例如將事件綁定到動態添加的元素。

所有這些看起來都不清楚，所以這是第一個直接使用類選擇器並綁定click事件的示例，該元素在綁定事件后動態插入。 正如您所看到的那樣，事件永遠不會被觸發，因為我們在綁定事件時選擇了DOM中不存在的元素。 這相當於.click

現在看看第二個例子。 在這里，您可以看到我們將根元素定義為document 。 這意味着click事件將在DOM樹中一直冒泡，然后如果單擊的元素具有動態類，則觸發。 這相當於.live

現在，如果在示例一中，在綁定事件時元素存在於DOM中，代碼將正常工作，如您在此處所見。

話雖如此。 除了澄清上述行為的文檔之外，這里有一個。

事件處理程序僅綁定到當前選定的元素; 它們必須存在於您的代碼調用.on（）時頁面上

所以，總之。 當您確定所選元素沒有父元素時，請使用document元素，該元素在綁定事件時保證在DOM中。 如果存在父元素，則使用該元素而不是document元素。 通過這種方式，事件不必一直冒泡到document ，它只需要移動很短的距離。

Answer 4

關於這一點沒有“推薦”。 第一個片段設置了“委托”事件，后者是“直接”事件。 on()的文檔深入解釋了這些內容。

當您需要偵聽尚不存在的元素的事件時，委托事件是必要的 - 例如，在AJAX調用之后將動態創建的元素。 它們有時也可以在性能方面更好 - 您需要更少的內存來將“真實”事件處理程序附加到文檔對象，而不是1000個按鈕。

我會說，如果可以的話，最好使用直接事件處理程序，或者將委托事件附加到盡可能接近真實事件源的元素。 在文檔對象上擁有所有事件處理程序可能對性能很糟糕 - 您必須匹配針對所有選擇器觸發的每個事件。 如果您需要阻止事件冒泡，也可能需要它 - 如果所有事件都記錄在文檔中，那么它們已經冒泡了。

Answer 5

實際上，在這種情況下最好的解決方案是不使用$(document)既不像$("selector")這樣的特定元素。

最好的方法是使用元素的容器並在on函數中綁定元素選擇器。 通過這樣做，您可以避免不必要的事件冒泡到文檔。

因此代碼應如下所示：

$("this_is_the_container").on('event','my_element_selector',function(){
// do some stuff here
})

Answer 6

$(*selector*).on(*event*, function(){})

僅適用於腳本運行時已加載到頁面中的元素。 如果將來會出現新元素，事件處理程序將無法正常工作。

$(document).on(*event*, *selector*, function(){} 

將執行事件處理程序，即使具有相同選擇器的元素將在腳本運行后出現在頁面上。

因此，如果您有一些元素，可以在隨機時間后出現，請使用

$(document).on()

否則使用

$(*selector*).on();