小编典典

document.addEventListener 和 window.addEventListener 的区别?

all

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

function onBodyLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
  document.addEventListener("touchmove", preventBehavior, false);

  window.addEventListener('shake', shakeEventDidOccur, false);
}

有什么区别,哪个更好用?


阅读 118

收藏
2022-07-16

共1个答案

小编典典

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

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

例如,"readystatechange"事件仅在document对象上。

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

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


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

2022-07-16