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

135

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

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

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

— 查理
source

Answers:

160

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

例如，"resize"在window对象上有一个事件不在document对象上。

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

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

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

如果您正在侦听传播的事件（例如click事件），则可以在文档对象或窗口对象上侦听该事件。传播事件的唯一主要区别在于计时。该事件将在document对象之前击中对象，window因为它首先发生在层次结构中，但是这种差异通常并不重要，因此您可以选择其中一个。我发现在处理传播的事件时通常最好选择最接近事件源的对象，以满足您的需求。这会建议你选择document了window当任会工作。但是，我经常会更靠近源头，document.body在文档中使用甚至更接近共同的父级（如果可能）。

— jfriend00
source

我对“冒充文档而不是打开窗口”感到好奇。因此，我在这里进行了测试-> jsfiddle.net/k3qv9/1我是否丢失了某些东西，还是冒泡了？

— banzomaikaka，2012年

@JOPLOmacedo-在您发表评论之前，我删除了有关冒泡的部分，因为我不确定哪个事件冒泡到窗口，哪个事件没有冒泡。我一直看到的协议是在document.body对象或document对象处拦截文档范围内的冒泡事件，因此没有理由使用window冒泡事件。无论如何，我的回答是，某些事件仅打开window，某些事件仅打开，document而有些同时发生，因此OP应该选择与其想要处理的事件相对应的对象。

— jfriend00 2012年

行。那也是我通常要做的-正是我决定测试的原因。感谢你的回答！

— banzomaikaka 2012年

由于“单击”事件在文档和窗口中均可用，如果我们在文档和窗口中均注册了事件，则文档的单击处理程序将首先触发窗口。因此对于这种观点，文档的选择更好。 jsfiddle.net/3LcVw

— 编码器

再举一个例子：如果您要为Samsung TV 添加addEventListener("keydown", event)via window，那么它将无法正常工作。但是，您将使用进行相同的操作document，然后它将。还取决于特定设备如何调用冒泡事件。

— Jakub Kubista

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

来自mozilla dev网络：

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

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

— 布莱恩·沃尔福德（Bryan Wolfford）
source

这通常不是正确的。不同的事件发生在不同的对象上。 document并且window不会收到相同的事件。您必须选择获取感兴趣事件的对象。某些事件可能同时发生在document和上window，但并非全部发生。

— jfriend00 2012年

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

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

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

大多数事件是针对相同window或document但有些事件，如resize，以及相关的其他活动loading， unloading以及opening/closing应全部在窗口中设置。
由于window具有文档，因此最好使用文档来处理（如果可以处理），因为事件将首先命中文档。
Internet Explorer不会响应窗口上注册的许多事件，因此您需要使用文档来注册事件。

— 消费类
source