window.addEventListener和document.addEventListener的区别

背景:

关于javascript的文档和窗口对象之间的区别似乎存在很多误解。

窗口对象和文档对象不一样!!!!

随便在浏览器打印一下window和document:

 上图:

1.window对象:打印出来的是全局注册变量;

2.document对象:打印出来是整个Dom元素树形结构;

然后再打印他们的监听事件,发现都能打印出来的监听事件是一样的,那么有什么区别呢?

window.document.addEventListener = function(event){…}

window.addEventListener = function(event){…}

我得到那个窗口,文档对象是两个具有不同属性的不同对象,this site提供了一个很好的视觉指导.我仍然没有看到这两行代码正在做什么之间的区别:

加载了文档的Javascript窗口对象

window:窗口是首先加载到浏览器中的东西:此窗口对象具有大多数属性,如length,innerWidth,innerHeight,name,是否已关闭,其父级等等。

document:文档对象是您的html,aspx,php或其他将加载到浏览器中的文档。该文档实际上已加载到window对象内部,并且具有可用的属性,例如标题,URL,cookie等。这实际上是什么意思?这意味着,如果要访问窗口的属性,则为window.property,如果为document,则为window.document.property,也可以简称为document.property。

这似乎很简单。但是,一旦引入iframe,会发生什么?见下图:

javascript_dom2

具有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-

posted @ 2020-11-04 17:59  桥南小院  阅读(4491)  评论(0编辑  收藏  举报