在前端开发中，我们经常使用addEventListener来监听事件。但是，有时候在document和window上使用该方法似乎没有什么区别，这引发了一些疑问：document.addEventListener和window.addEventListener之间到底有什么差异呢？
概述
首先，我们需要了解document和window在Web浏览器中的作用。
document对象表示当前页面的文档，它允许我们操作DOM元素以及设置文档的属性。window对象代表整个浏览器窗口，它允许我们控制浏览器窗口的大小、位置以及跳转到其他页面等。
基于这两者的不同特性，我们可以得出以下结论：
document对象只与当前页面的内容有关，而window对象则表示整个浏览器窗口。- 由于
document对象只与当前页面有关，因此它比window对象更快、更轻量级。
addEventListener的用法
在阐述addEventListener的差异之前，我们先来回顾一下它的用法。addEventListener方法允许我们注册一个事件处理程序（即回调函数），以便在特定条件下触发该函数。下面是addEventListener的一般语法：
------------------------------- --------- ------------
其中：
element：要绑定事件的元素。event：要监听的事件类型，如click、keyup等等。function：事件处理函数，即在触发事件时要执行的代码。useCapture（可选）：一个布尔值，指定该事件是否应在捕获或冒泡阶段处理。
差异
现在我们回到主题，看看document.addEventListener和window.addEventListener之间的差异。
1. 捕获与冒泡
首先，我们需要了解事件模型中的两个关键概念：捕获和冒泡。当一个事件在DOM树中发生时，它会沿着从根节点到目标节点的路径进行捕获，然后再从目标节点返回根节点的过程中进行冒泡。
在addEventListener方法中，如果useCapture参数为true，则事件将在捕获阶段被处理；否则，在冒泡阶段被处理。默认情况下，useCapture参数为false，因此事件通常在冒泡阶段被处理。
由于document对象是整个文档的根节点，所有事件都会在它上面被触发，因此在document上使用addEventListener时，无论是在捕获阶段还是冒泡阶段监听事件，其结果都将相同。而在window对象上，由于它代表整个浏览器窗口，因此它不仅可以捕获事件，还可以在事件冒泡过程中处理事件。
2. 全局作用域
其次，由于window对象是全局作用域，因此我们可以在任何地方访问它。这意味着，在使用window.addEventListener时，我们可以从任何代码处访问该事件处理程序，而在使用document.addEventListener时，事件处理程序只能在当前文档内运行。
例如，如果您在一个HTML文件中嵌入了另一个HTML文件，那么在子文件中注册的事件处理程序只会在该子文档内触发，而不会影响父文档或其他窗口。
3. 加载
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12467