jQuery事件處理 - 綁定到文檔或「body」元素？

我注意到當我們想引用整個頁面時，特別是在綁定事件時，使用了$(document)和$('body')。jQuery事件處理 - 綁定到文檔或「body」元素？

$(document).on('click', '.myElement', function);

和

$('body').on('click', '.myElement', function);

有什麼區別表現明智？如果$(document)將事件綁定到整個HTML文檔，爲什麼我們不使用$('body')來代替click這樣的事件？

請注意，這個問題不是指使用ready函數，而是使用.on()或.delegate()進行綁定。

來源

2013-04-16 Samuel Liew

http://stackoverflow.com/questions/12307112/difference-between-document-body-and-body-jquery – TGH

我已經看到了。這是一個稍有不同的問題 –

他們是不同的元素。 –

有什麼區別表現明智？

幾乎可以肯定沒有，或者更準確地說，沒有可衡量的。 $('body')理論上必須搜索DOM的body元素，但這將會非常快。另外，因爲body是document的子項，所以在document之前的事件納秒將冒泡。

有一對夫婦的差異，雖然：

如果您使用$('body')在腳本中head並沒有延緩它執行（ready等。），$('body')找不到任何東西，並且不會掛接任何處理程序。另一方面，$(document)會。

如果文檔的身體不補口，然後在至少某些瀏覽器，你會得到一個點擊document但不是body：

$(document).on("click", function() { 
 
    $("<p>document</p>").appendTo(document.body); 
 
}); 
 
$('body').on("click", function() { 
 
    $("<p>body</p>").appendTo(document.body); 
 
});

body { 
 
    border-bottom: 1px solid #060; 
 
}

<p>The line marks the bottom of <code>body</code>. Click above and below the line to see where the click was caught. (Note the line will move as we append to <code>body</code>.)</p> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

當然，這不適用於您的$('body').on('click', '.myElement', function);，因爲如果點擊是在body之外，那麼它不會通過.myElement ...

對於全球處理程序，我使用$(document)，從來沒有$('body')（或$(document.body)），但這可能是更多的習慣比理性。

來源

2015-08-19 17:20:33

我完全忘記了這個問題。（*你猜這是我的誰upvoted你的帖子由於您之前提出的其他CW文件？*）以前我對其他答案並不滿意，因爲它們不夠徹底。謝謝您採用自己的方式回答此問題。 –

@ Samuel：不，但您的評論真的很慷慨，我真的很感激它，所以我檢查了你的個人資料，看到了一個我可以回答的問題，沒有一個可以接受的答案，所以...... :-) –

$('body')針對<body> html元素，而$(document)針對整個html文檔。這意味着如果您想引用<head>元素中的某個元素，您將希望從$(document)開始，因爲這是直接路徑。

出於您的目的，根據您向我們展示的內容，它們應該是等同的。

來源

2013-04-16 05:24:18 DiMono

這絕對是不一樣的，因爲雖然使用jQuery/JavaScript的工作時，你可以做你的工作與他們兩個這樣做，但你卻可以通過CSS樣式沒有文件。你的身體可以有一個特定的高度。嘗試將200px的高度添加到您的身體和您選擇的背景顏色（因此，您可以看到差異）。然後將綁定添加到文檔和正文（針對兩個事件的不同操作）。

本實驗可能適合您。

來源

2013-04-16 05:26:28 akash4eva

'document'關鍵字只是包含整個HTML文檔的對象的句柄。另一方面在jQuery中，$（'body'）包含HTML文檔的正文部分。但事實上，你不會注意到它們之間的行爲差異。

有關的幾個jQuery的功能及其工作流程的進一步信息，請訪問：jQuery function

來源

2013-04-16 05:33:44

Body是document一個孩子。正因爲如此，在它們冒泡到document之前，活動將首先到達body。
例如：http://jsfiddle.net/CoryDanielson/JhH9V/

來源

2013-04-16 05:39:48

jQuery事件處理 - 綁定到文檔或「body」元素？

回答

相關問題