document.addEventListener 和 window.addEventListener 的区别? [英] Difference between document.addEventListener and window.addEventListener?

问题描述

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

While using PhoneGap, it has some default JavaScript code that uses document.addEventListener, but I have my own code which uses 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?

推荐答案

document 和 window 是不同的对象，它们有一些不同的事件.对它们使用 addEventListener() 可以侦听发往不同对象的事件.您应该使用实际拥有您感兴趣的事件的那个.

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.

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

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

例如，readystatechange" 事件仅发生在 document 对象上.

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

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

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

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

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

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

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).

这篇关于document.addEventListener 和 window.addEventListener 的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！