addEventListener - 附加到document.body

时间:2017-04-12 20:50:51

标签: javascript javascript-events

我正在写一个拖放处理程序,并希望将eventListeners设置为最高级别 - 我认为它是body。但是,我注意到在example at MDN中,他们将听众设置为documentdocument.body,这让我想问为什么这会更好?一般来说,为什么我会选择附加到一个的听众与另一个相比(他们是否都支持相同的听众)?

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

更新 This SO question解决了将事件绑定到documentelement级别的问题。非常有帮助。

UPDATE2 有趣的是,当为所有拖放监听器设置document.addEventListener()时,Firefox会挂起拖动(Chrome不会)。当我将document.body.addEventListener()更改为dragEnter, dragOver, dragLeave, drop时,一切正常。似乎dragStart想要出现在document上。

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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