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

javascript dom events event-listener

2022-08-30 01:30:10

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

function onBodyLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
  document.addEventListener("touchmove", preventBehavior, false);
  
  window.addEventListener('shake', shakeEventDidOccur, false);
}

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

答案 1

和是不同的对象，它们有一些不同的事件。在它们上使用可以侦听发往不同对象的事件。您应该使用实际具有您感兴趣的事件的那个。documentwindowaddEventListener()

例如，对象上有一个不在对象上的事件。"resize"windowdocument

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

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

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

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

答案 2

你会发现，在javascript中，通常有许多不同的方法来做同样的事情或找到相同的信息。在您的示例中，您正在寻找一些保证始终存在的元素。两者都符合要求（只有几个区别）。windowdocument

来自 mozilla dev network：

addEventListener（）在单个目标上注册单个事件侦听器。事件目标可以是文档中的单个元素、文档本身、窗口或 XMLHttpRequest。

因此，只要你能指望你的“目标”总是在那里，唯一的区别就是你在听什么事件，所以只要使用你最喜欢的。