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

Question

使用PhoneGap时,它有一些使用的默认JavaScript代码document.addEventListener,但我有自己的代码使用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

绑定window是指浏览器提供的内置对象。它代表包含document. 调用其addEventListener方法会注册第二个参数（回调函数），以便在第一个参数描述的事件发生时调用。

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

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

1. 大多数事件与window或相同，document但有些事件如、 以及与、 、 和resize相关的其他事件都应该在窗口上设置。loadingunloadingopening/closing
2. 由于窗口具有文档，因此最好使用文档来处理（如果它可以处理），因为事件将首先命中文档。
3. Internet Explorer 不会响应窗口上注册的许多事件，因此您需要使用文档来注册事件。

Answer 3

您会发现，在javascript中，通常有许多不同的方法可以执行相同的操作或查找相同的信息。在您的示例中，您正在寻找某个保证始终存在的元素。window和document两个适合票据（只有少数的差异）。

来自mozilla dev网络：

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

因此，只要您可以指望始终存在的“目标”，唯一的区别就是您要收听的事件是什么，因此只需使用自己喜欢的事件即可。