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健壮。