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屋!