window.addEventListener和document.addEventListener的区别
背景:
关于javascript的文档和窗口对象之间的区别似乎存在很多误解。
窗口对象和文档对象不一样!!!!
随便在浏览器打印一下window和document:
上图:
1.window对象:打印出来的是全局注册变量;
2.document对象:打印出来是整个Dom元素树形结构;
然后再打印他们的监听事件,发现都能打印出来的监听事件是一样的,那么有什么区别呢?
window.document.addEventListener = function(event){…} window.addEventListener = function(event){…}
我得到那个窗口,文档对象是两个具有不同属性的不同对象,this site提供了一个很好的视觉指导.我仍然没有看到这两行代码正在做什么之间的区别:
![javascript_dom_1 加载了文档的Javascript窗口对象](http://eligeske.com/wp-content/uploads/2011/01/javascript_dom_1.jpg)
window:窗口是首先加载到浏览器中的东西:此窗口对象具有大多数属性,如length,innerWidth,innerHeight,name,是否已关闭,其父级等等。
document:文档对象是您的html,aspx,php或其他将加载到浏览器中的文档。该文档实际上已加载到window对象内部,并且具有可用的属性,例如标题,URL,cookie等。这实际上是什么意思?这意味着,如果要访问窗口的属性,则为window.property,如果为document,则为window.document.property,也可以简称为document.property。
这似乎很简单。但是,一旦引入iframe,会发生什么?见下图:
![javascript_dom2 javascript_dom2](http://eligeske.com/wp-content/uploads/2011/01/javascript_dom2.jpg)
具有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-