文档之间的区别。addEventListener和window。addEventListener?

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

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

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

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

160546 次浏览
小开
最佳答案

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

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

例如，"readystatechange"事件只存在于document对象上。

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

下面是一个有趣的图表，显示了哪种类型的对象创建哪种类型的事件

如果您正在侦听一个传播事件(例如单击事件)，那么您可以侦听文档对象或窗口对象上的该事件。传播事件的唯一主要区别是时间。事件将在document对象之前击中window对象，因为它在层次结构中首先出现，但这种差异通常不是重要的，所以你可以选择其中任何一个。我发现在处理传播事件时，最好选择最接近事件源的对象，以满足您的需求。这将建议你选择document而不是window，当两者都可以工作时。但是，我经常会更接近源，并在文档中使用document.body或更接近的公共父类(如果可能的话)。

小开

你会发现，在javascript中，通常有许多不同的方法来做相同的事情或查找相同的信息。在您的示例中，您正在寻找一些保证始终存在的元素。window和document都符合要求(只有一些不同)。

从Mozilla dev网络:

addEventListener()在单个事件监听器上注册单个事件监听器 目标。事件目标可以是文档中的单个元素

. xml文件本身，窗口或XMLHttpRequest

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

小开

window绑定引用浏览器提供的内置对象。它表示包含document. xml文件的浏览器窗口。调用它的addEventListener方法注册第二个参数(回调函数)，当它的第一个参数描述的事件发生时调用它。

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

在选择窗口或文档到addEventListners之前应该注意以下几点

    大多数事件对于window或document是相同的，但是 一些事件，比如resize，以及其他与loading相关的事件， unloading和opening/closing都应该设置在窗口上 既然窗口中有文档，那么使用document to是一个很好的做法 处理(如果它能处理)，因为事件会先击中文档
  1. Internet Explorer不响应在 窗口，因此您将需要使用文档来注册事件
小开

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

因此，如果你希望事件发生在元素上，最好使用window.addEventListener()(假设窗口变量是一个元素)，因为在这里监听事件时最重要的事情是代码和事件执行速度更快:在这种情况下唯一重要的事情。


提交答案