背景：

關於javascript的文件和視窗物件之間的區別似乎存在很多誤解。

視窗物件和文件物件不一樣！！！！

隨便在瀏覽器列印一下window和document：

上圖：

1.window物件：打印出來的是全域性註冊變數；

2.document物件：打印出來是整個Dom元素樹形結構；

然後再列印他們的監聽事件，發現都能打印出來的監聽事件是一樣的，那麼有什麼區別呢？

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

window.addEventListener = function(event){…}

我得到那個視窗,文件物件是兩個具有不同屬性的不同物件,

document：視窗是首先載入到瀏覽器中的東西：此視窗物件具有大多數屬性，如length，innerWidth，innerHeight，name，是否已關閉，其父級等等。

window：文件物件是您的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會捕獲第一個按鈕元素上的那些點選.

-end-