JS高階—18—js和瀏覽器互動的方式：BOM、DOM、事件監聽；
一、BOM
1.1概念
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
BOM(Browser Object Model) 是指瀏覽器物件模型，是用於描述這種物件與物件之間層次關係的模型，瀏覽器物件模型提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。
BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件（location、history、document）都是該物件的子物件。
1.2window物件之全域性物件和瀏覽器視窗物件
window既要做v8引擎執行js時的全域性物件，又要做瀏覽器視窗物件；
（1）全域性物件
（2）瀏覽器視窗物件
（3）window繼承eventlistener類
派發事件，派發任何事件，然後用addEventListener監聽，間聽到了就執行回撥函式；
1.3location物件
1.4history物件
history.pushState（）是vue-router前端路由的實現基礎，url雖然改變，但是並沒有向後端請求資源，而是監聽url的改變然後變了一個元件而已；
二、DOM
1.1概念
html一旦被瀏覽器解析，瀏覽器就會自動幫助我們建立document物件；（就像會幫助我們一開啟瀏覽器視窗就建立window物件一樣，注意document物件是window物件的子物件）
dom是溝通js和html標籤的橋樑，我們通過js和dom的api，就可以操作dom；
整個html是一個document
element指的指html標籤
characterdata指的是標籤裡的文字等資料，還有指得是註釋；
attr指的是標籤裡的屬性
1.2eventTargnt
所有的文件節點、元素節點、字元資料節點等都繼承了eventTartgent介面，所以都用addEventListener、removeEventListener、dispatchEventListener這三個方法；
1.3node節點
1.4document
- document的location指向了window的location；
- querySelector方法表示使用css選擇器選擇元素；
1.5element
三、 事件監聽
我們的節點繼承了eventTatget，可以使用addEventListener（）方法，但是第一個引數需要一個事件監聽物件，就是我們這裡要講的，比如click、mousedown、mouseup等；
3.1概念
事件監聽方式一：
事件監聽方式二：注意這種方式如果重複寫了很多個，那麼只能最後一個生效，因為最後一個會覆蓋前面的；
事件監聽方式三：這種方式可以重複多次的，每一個都會被呼叫不會被覆蓋；
3.2事件流
3.3事件冒泡和事件捕獲
有了時間流，就會出現事件冒泡和事件捕獲
預設採用時間冒泡的順序，如果想開啟事件捕獲，多加一個引數即可；即addEventListener('click',()=>{},true);
3.4事件物件event
當我們出發一個回撥函式時，預設傳遞一個event物件；