addEventListener - 附加到文檔與document.body

我正在寫一個拖放處理程序，並希望將eventListeners設置爲最高級別 - 我推測這將是body。然而，我注意到在example at MDN中，他們將聽衆設置爲document而不是document.body，這導致我問爲什麼這會更可取，並且一般來說，爲什麼我會選擇聽者與其他人相關（以及他們是否都支持相同的聽衆）？addEventListener - 附加到文檔與document.body

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

UPDATEThis SO question地址時發生的事件結合到document與在element水平。很有幫助。

UPDATE2有趣的是，當所有拖放監聽器都設置爲document.addEventListener()時，Firefox會掛起拖動（Chrome不會）。當我將它更改爲document.body.addEventListener()爲dragEnter, dragOver, dragLeave, drop它一切正常。看起來像dragStart想要在document然而。

來源

2017-04-12 mseifert

嘗試O讀這篇文章https://www.sitepoint.com/jquery-body-on-document-on/ – Tareq

_「我寫一個拖放處理程序」 _爲什麼你不重視處理程序到發生拖放的元素？ – guest271314

@ guest271314 - 如果我有1000個可以拖放的元素，我可以將6個eventListeners'（dragStart，dragEnter，dragOver，dragLeave，drop，dragStop）'附加到所有1000個元素，或者將這些元素附加到'document '並處理如何處理事件'target'。因爲無論如何我必須處理'target'，所以擁有一個全局處理器似乎更有效率。 – mseifert

body只不過是document中的一個元素。 document比body更「頂級」。但是，在HTML中，沒有標籤明確表示document本身，因此在HTML中，body被用作下一個最好的東西。由於事件會冒泡，所以在加載body報告時，通常可以安裝document以加載。您可以看到一系列活動以及他們使用哪些對象/在here。

這個問題不談，內聯事件處理程序應避免贊成使用addEventListener因爲內嵌的事件處理程序在JavaScript中設置事件處理程序：

創建意大利麪條代碼是難以閱讀，導致重複代碼並不能很好地擴展。
隱式創建全局包裝函數，該函數在提供的事件處理代碼中更改this綁定。這可能會導致您的處理程序無法正常工作。
不按W3C DOM Event Handling standard和不一樣強大addEventListener。

來源

2017-04-12 20:55:38

具體來說，我使用addEventListener來添加我所有的事件。試圖找出添加它們的最佳位置：'document.body.addeventListener（）'或'document。addEventListener（）' – mseifert

@mseifert您可以在要註冊事件的對象上使用'addEventListener'。 'body'在這種情況下很少用於'document'。正如我所說的，你看到'body'的唯一原因是在沒有明確的方式引用'document'的情況下，使用舊的「inline」事件註冊。 –

addEventListener - 附加到文檔與document.body

回答

相關問題