184

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

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

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

4

4 回答 4

219

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

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

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

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

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

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

于 2012-08-20T21:31:47.603 回答
5

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

来自Mozilla 开发网络：

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

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

于 2012-08-20T21:34:25.320 回答
3

绑定是指浏览器提供的window内置对象。它表示包含document. 调用它的addEventListener方法会注册第二个参数（回调函数），只要它的第一个参数描述的事件发生，就会调用它。

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

选择窗口或文档添加EventListners前应注意以下几点

  1. 大部分事件对于window或是相同的，document但有些事件如resize、 和其他与loading、 unloading、相关的事件opening/closing都应该在窗口上设置。
  2. 由于窗口有文档，因此最好使用文档来处理（如果可以处理），因为事件将首先命中文档。
  3. Internet Explorer 不会响应窗口上注册的许多事件，因此您需要使用文档来注册事件。
于 2019-12-17T09:16:50.523 回答
0

在我看来，在处理传播的事件时，通常最好选择最接近事件源的对象以满足您的需求。

所以，如果你想让事件发生在元素上，最好使用window.addEventListener()（假设 window 变量是一个元素），因为这里在监听事件时最重要的是代码和事件执行速度更快：唯一的在这种情况下很重要。

于 2021-09-21T19:15:31.313 回答