javascript - document.addEventListener 和 window.addEventListener 的区别？

Question

在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener:

function onBodyLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
  document.addEventListener("touchmove", preventBehavior, false);
  
  window.addEventListener('shake', shakeEventDidOccur, false);
}

有什么区别，哪个更好用？

Answer 1

document 和window 是不同的对象，它们有一些不同的事件。在它们上使用 addEventListener() 监听发往不同对象的事件。您应该使用实际有您感兴趣的事件的那个。

例如，window 对象上有一个 “resize” 事件，而 document 对象上没有。

例如，"readystatechange" 事件仅发生在 document 对象上。

所以基本上，您需要知道哪个对象接收了您感兴趣的事件，并在该特定对象上使用 .addEventListener()。

这是一个有趣的图表，显示了哪些类型的对象会创建哪些类型的事件:https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

---

如果您正在监听传播的事件(例如单击事件)，那么您可以在文档对象或窗口对象上监听该事件。传播事件的唯一主要区别在于时间。该事件将在 window 对象之前命中 document 对象，因为它在层次结构中首先发生，但这种差异通常并不重要，因此您可以选择其中一个。我发现在处理传播的事件时，通常最好选择最接近事件源的对象来满足您的需要。这将建议您选择 document 而不是 window 两者都可以工作。但是，我经常会更接近源代码并使用 document.body 或文档中更接近的公共(public)父级(如果可能)。