addEventListener - 附加到document.body

Question

我正在写一个拖放处理程序，并希望将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()更改为dragEnter, dragOver, dragLeave, drop时，一切正常。似乎dragStart想要出现在document上。

Answer 1

body只是document中的一个元素。 document更多＆＃34;顶级＆＃34;比body。但是，在HTML中，没有标记明确表示document本身，因此在HTML中，body被用作下一个最好的东西。由于事件冒泡，加载body报告时，通常可以安全地说document也已加载。您可以在 here 上查看事件列表及其使用的对象。

除了这个问题之外，应该避免使用内联事件处理程序，而是使用addEventListener在JavaScript中设置事件处理程序，因为内联事件处理程序：

1. 创建难以阅读的意大利面条代码，导致代码重复，并且不能很好地扩展。

2. 隐式创建全局包装函数，改变所提供事件处理代码中的this绑定。这可能导致您的处理程序无法正常工作。

3. 请勿关注 W3C DOM Event Handling standard ，并且不如addEventListener强健。