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-