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()侦听发往不同对象的事件。您应该使用实际上您感兴趣的事件。

例如，"resize"对象上的window事件不在document对象上。

例如，"DOMContentLoaded"事件仅在document对象上。

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

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

如果您正在侦听传播的事件（例如click事件），那么您可以在文档对象或窗口对象上侦听该事件。传播事件的唯一主要区别在于时间。该事件将在document对象之前点击window对象，因为它首先出现在层次结构中，但这种差异通常并不重要，因此您可以选择其中任何一个。我发现在处理传播事件时，最好选择最接近事件源的对象来满足您的需求。这意味着，当两者都有效时，您选择document超过window。但是，我经常更接近源并使用document.body甚至文档中更近的共同父级（如果可能的话）。

Answer 2

你会发现在javascript中，通常有很多不同的方法可以做同样的事情或找到相同的信息。在您的示例中，您正在寻找一些保证始终存在的元素。 window和document都符合要求（只有一些差异）。

来自mozilla dev network：

addEventListener（）在单个事件上注册单个事件侦听器目标。事件目标可以是文档中的单个元素，文档本身，窗口或XMLHttpRequest。

所以只要你可以指望你的“目标”永远在那里，唯一的区别就是你正在听的事件，所以只需使用你最喜欢的。

Answer 3

window绑定是指浏览器提供的内置对象。它表示包含document的浏览器窗口。每当其第一个参数描述的事件发生时，调用其addEventListener方法将注册要调用的第二个参数（回调函数）。

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

在选择窗口或文档以添加EventListners之前，应注意以下几点

大多数事件与window或document相同，但诸如resize之类的一些事件，以及与loading相关的其他事件， unloading和opening/closing应该都在窗口上设置。
由于窗口中有文档，因此最好使用文档来处理事件（如果可以处理），因为事件将首先击中文档。
Internet Explorer不会响应在窗口，因此您将需要使用文档来注册事件。

document.addEventListener和window.addEventListener之间的区别？

3 个答案: