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-