Javascript document.addEventListener 和 window.addEventListener 的区别？

Difference between document.addEventListener and window.addEventListener?

提问by Charlie

While using PhoneGap, it has some default JavaScript code that uses document.addEventListener, but I have my own code which uses window.addEventListener:

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

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

What is the difference and which is better to use?

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

回答by jfriend00

The documentand windoware different objects and they have some different events. Using addEventListener()on them listens to events destined for a different object. You should use the one that actually has the event you are interested in.

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

For example, there is a "resize"event on the windowobject that is not on the documentobject.

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

For example, the "DOMContentLoaded"event is only on the documentobject.

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

So basically, you need to know which object receives the event you are interested in and use .addEventListener()on that particular object.

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

Here's an interesting chart that shows which types of objects create which types of events: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

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

---

---

If you are listening to a propagated event (such as the click event), then you can listen for that event on either the document object or the window object. The only main difference for propagated events is in timing. The event will hit the documentobject before the windowobject since it occurs first in the hierarchy, but that difference is usually immaterial so you can pick either. I find it generally better to pick the closest object to the source of the event that meets your needs when handling propagated events. That would suggest that you pick documentover windowwhen either will work. But, I'd often move even closer to the source and use document.bodyor even some closer common parent in the document (if possible).

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

回答by Bryan Wolfford

You'll find that in javascript, there are usually many different ways to do the same thing or find the same information. In your example, you are looking for some element that is guaranteed to always exist. windowand documentboth fit the bill (with just a few differences).

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

From mozilla dev network:

来自mozilla 开发网络：

addEventListener() registers a single event listener on a single target. The event target may be a single element in a document, the document itself, a window, or an XMLHttpRequest.

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

So as long as you can count on your "target" always being there, the only difference is what events you're listening for, so just use your favorite.

因此，只要您可以指望您的“目标”始终在那里，唯一的区别就是您正在收听的事件，所以只需使用您最喜欢的。

回答by AConsumer

The windowbinding refers to a built-in object provided by the browser. It represents the browser window that contains the document. Calling its addEventListenermethod registers the second argument (callback function) to be called whenever the event described by its first argument occurs.

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

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

Following points should be noted before select window or document to addEventListners

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

1. Most of the events are same for windowor documentbut some events like resize, and other events related to loading, unloading, and opening/closingshould all be set on the window.
2. Since window has the document it is good practice to use document to handle (if it can handle) since event will hit document first.
3. Internet Explorer doesn't respond to many events registered on the window,so you will need to use document for registering event.

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