document.addEventListener 和 window.addEventListener 的区别？

小编典典

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);
}

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

阅读 116

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