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

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

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

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

2 个解决方案

#1

The document and window are 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.

文档和窗口是不同的对象，它们有一些不同的事件。在它们上使用addEventListener（）侦听发往不同对象的事件。您应该使用实际上您感兴趣的事件的那个。

For example, there is a "resize" event on the window object that is not on the document object.

例如，窗口对象上存在“resize”事件，该事件不在文档对象上。

For example, the "DOMContentLoaded" event is only on the document object.

例如，“DOMContentLoaded”事件仅在文档对象上。

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 document object before the window object 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 document over window when either will work. But, I'd often move even closer to the source and use document.body or even some closer common parent in the document (if possible).

如果您正在侦听传播的事件（例如click事件），则可以在文档对象或窗口对象上侦听该事件。传播事件的唯一主要区别在于时间。事件将在窗口对象之前命中文档对象，因为它首先出现在层次结构中，但这种差异通常是无关紧要的，因此您可以选择其中一个。我发现在处理传播事件时，最好选择最接近事件源的对象来满足您的需求。这表明你可以在窗口上选择文档。但是，我经常更接近源并使用document.body甚至是文档中更近的共同父级（如果可能的话）。

#2

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. window and document both fit the bill (with just a few differences).

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

From mozilla dev network:

来自mozilla dev网络：

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.

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

#1