window.addEventListener和document.addEventListener的区别
背景：
关于javascript的文档和窗口对象之间的区别似乎存在很多误解。
窗口对象和文档对象不一样！！！！
随便在浏览器打印一下window和document：
上图：
1.window对象：打印出来的是全局注册变量；
2.document对象：打印出来是整个Dom元素树形结构；
然后再打印他们的监听事件，发现都能打印出来的监听事件是一样的，那么有什么区别呢？
window.document.addEventListener = function(event){…} window.addEventListener = function(event){…}
我得到那个窗口,文档对象是两个具有不同属性的不同对象,this site提供了一个很好的视觉指导.我仍然没有看到这两行代码正在做什么之间的区别：
window：窗口是首先加载到浏览器中的东西：此窗口对象具有大多数属性，如length，innerWidth，innerHeight，name，是否已关闭，其父级等等。
document：文档对象是您的html，aspx，php或其他将加载到浏览器中的文档。该文档实际上已加载到window对象内部，并且具有可用的属性，例如标题，URL，cookie等。这实际上是什么意思？这意味着，如果要访问窗口的属性，则为window.property，如果为document，则为window.document.property，也可以简称为document.property。
这似乎很简单。但是，一旦引入iframe，会发生什么？见下图：
具有iframe的Javascript窗口对象：实际上，将iframe视为已加载其自身文档的新窗口。在这里似乎有些奇怪，但是如果您考虑一下，这确实是有道理的。原始父窗口负责加载其他窗口，而不是文档。
访问框架的属性是window.frames []，它是所有框架的数组。如果只有一个iframe，则可以使用window.frames [0]访问它。由于iframe也是一个窗口对象，因此可以使用window.frames [0] .mywindowproperty访问该框架的窗口属性。
这是属性列表的链接：
这只是关于如何使用窗口和文档对象的快速说明。如果对它有所了解，那么编程就会变得容易一些。
进一步澄清：做这样的事情有什么不同：
window.addEventListener(‘mousemove’,function(event){…});
并执行类似这样的窗口
document.addEventListener(‘mousemove’,function(event){…});
最佳答案 ：大多数DOM对象以及窗口本身都有addEventListener方法.事件在事件开始的元素及其祖先上冒泡并触发事件侦听器.
这两段代码覆盖了不同级别的addEventListener.
如果您要调用原始方法,那么很少(如果有的话)使您调用它们中的哪些对象产生任何差异.如果你要进行比较会有所不同,例如：
window.addEventListener('click', handler); document.querySelector('button', handler);
window会捕获文档中的所有点击,document会捕获第一个按钮元素上的那些点击.
区别：
/* 界面上点击一个button按钮，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的， document是被window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window， 然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件又会像水底的泡泡一样慢慢往外层穿出，直到window结束。 */ window.addEventListener('click',function(){ console.log('window addEventListener：捕获优先3'); },false); document.addEventListener('click',function(){ console.log('document addEventListener：冒泡优先2') },false); document.getElementById("myBtn").addEventListener("click", function(){ console.log('document addEventListener：点击按钮冒泡1') });
-end-
