addEventListener - 附加到文档与 document.body答案

【问题标题】：addEventListener - attaching to document versus document.bodyaddEventListener - 附加到文档与 document.body
【发布时间】：2017-04-12 20:50:50
【问题描述】：

我正在编写一个拖放处理程序，并希望将eventListeners 设置为最高级别——我猜想是body。但是，我在example at MDN 中注意到，他们将听众设置为document 与document.body，这让我问为什么这会更可取，一般来说，为什么我会选择附加到一个而不是另一个的听众（并且做它们都支持相同的侦听器）？

那么我什么时候使用document.body.addeventListener() 和document.addEventListener()？

更新This SO question 解决了将事件绑定到document 而不是element 级别的时间。很有帮助。

UPDATE2 有趣的是，当为所有拖放侦听器设置document.addEventListener() 时，Firefox 会因拖动而挂起（Chrome 不会）。当我将其更改为 document.body.addEventListener() for dragEnter, dragOver, dragLeave, drop 时，一切正常。似乎dragStart 想加入document。

【问题讨论】：

试试看这篇文章sitepoint.com/jquery-body-on-document-on
“我正在编写拖放处理程序” 为什么不将处理程序附加到发生拖放的元素上？
@guest271314 - 如果我有 1000 个可以拖放的元素，我可以将 6 个 eventListener (dragStart, dragEnter, dragOver, dragLeave, drop, dragStop) 附加到所有 1000 个元素，或者将这些附加到 document 并处理要处理的内容处理事件target。由于无论如何我都必须处理target，因此拥有一个全局处理程序似乎更有效。
@Tareq - 感谢您的链接。那篇文章链接了a SO question，这非常有帮助。

标签： javascript dom-events

【解决方案1】：

body 只是document 中的一个元素。 document 比 body 更“顶级”。但是，在 HTML 中，没有明确表示 document 本身的标记，因此在 HTML 中，body 被用作下一个最好的东西。由于事件冒泡，当body 报告已加载时，通常可以肯定地说document 也已加载。您可以查看事件列表以及它们使用/处理的对象here。

撇开这个问题不谈，应避免使用内联事件处理程序，而应使用 addEventListener 在 JavaScript 中设置事件处理程序，因为内联事件处理程序：

创建难以阅读的意大利面条式代码，导致代码重复且无法很好地扩展。
在提供的事件处理代码中隐式创建更改 this 绑定的全局包装函数。这可能会导致您的处理程序无法正常工作。
不要跟随W3C DOM Event Handling standard，不如addEventListener健壮。

【讨论】：

具体来说，我正在使用 addEventListener 添加我的所有事件。只是想找出添加它们的最佳位置：document.body.addeventListener() 或 document.addEventListener()
@mseifert 您在要注册事件的对象上使用addEventListener。在这种情况下，body 很少用于支持document。正如我所说，您看到使用 body 的唯一原因是使用较旧的“内联”事件注册，其中没有明确的方式来引用 document。