addEventListener - 附加到文檔與 document.body

Question

我正在編寫一個拖放處理程序並希望將eventListeners設置為最高級別 - 我認為這將是body 。 但是，我在 MDN的示例中注意到，他們將偵聽器設置為document與document.body這讓我問為什么這會更可取，一般來說，為什么我會選擇連接到一個的偵聽器而不是另一個（並且它們都是支持相同的聽眾）？

那么我什么時候使用document.body.addeventListener()與document.addEventListener() ？

更新這個 SO 問題解決了何時將事件綁定到document而不是在element級別。 很有幫助。

UPDATE2有趣的是，當為所有拖放偵聽器設置document.addEventListener()時，Firefox 會因拖動而掛起（Chrome 不會）。 當我將它更改為document.body.addEventListener()以用於dragEnter, dragOver, dragLeave, drop其全部dragEnter, dragOver, dragLeave, drop 。 然而，似乎dragStart想要在document 。

Answer 1

body只是document一個元素。 document比body更“頂級”。 但是，在 HTML 中，沒有標簽明確表示document本身，因此在 HTML 中， body被用作下一個最好的東西。 由於事件冒泡，當body報告加載時，通常可以安全地說document也已加載。 您可以在此處查看事件列表以及它們使用/使用的對象。

撇開這個問題不談，應避免使用內聯事件處理程序，而應使用addEventListener在 JavaScript 中設置事件處理程序，因為內聯事件處理程序：

1. 創建難以閱讀的意大利面條式代碼，會導致代碼重復並且無法很好地擴展。

2. 隱式創建全局包裝函數，在提供的事件處理代碼中更改this綁定。 這可能會導致您的處理程序無法正常工作。

3. 不要遵循W3C DOM 事件處理標准，並且不如addEventListener健壯。