一.瀏覽器監(jiān)聽(tīng)事件有哪些
瀏覽器監(jiān)聽(tīng)事件涵蓋了用戶交互、頁(yè)面加載、資源加載、DOM變化等多個(gè)方面，以下是一份較為詳細(xì)的瀏覽器事件大全：
頁(yè)面加載和生命周期事件
`DOMContentLoaded`：當(dāng)初始HTML文檔被加載并解析完畢時(shí)觸發(fā)，但不包括樣式表、圖像等外部資源。
`load`：當(dāng)整個(gè)頁(yè)面包括所有外部資源如圖片、樣式表等都已完成加載時(shí)觸發(fā)。
`beforeunload`：頁(yè)面即將卸載時(shí)觸發(fā)，通常用于阻止用戶離開(kāi)頁(yè)面或詢問(wèn)是否保存未提交的數(shù)據(jù)。
`unload`：頁(yè)面正在卸載時(shí)觸發(fā)，但此事件在某些現(xiàn)代瀏覽器中可能不可靠。
`pageshow` / `pagehide`：頁(yè)面顯示或隱藏時(shí)觸發(fā)，與瀏覽器的歷史記錄有關(guān)。
用戶交互事件
`click`、`dblclick`：鼠標(biāo)單擊、雙擊事件。
`mousedown`、`mouseup`、`mousemove`、`mouseover`、`mouseout`、`mouseenter`、`mouseleave`、`contextmenu`：鼠標(biāo)相關(guān)事件。
`touchstart`、`touchmove`、`touchend`、`touchcancel`：觸摸設(shè)備上的觸摸事件。
`keydown`、`keyup`、`keypress`：鍵盤按鍵事件。
`scroll`：滾動(dòng)事件。
`focus`、`blur`：元素獲取或失去焦點(diǎn)事件。
`input`、`change`：表單元素內(nèi)容改變事件。
`formchange`、`forminput`（部分瀏覽器支持）：表單數(shù)據(jù)變化事件。
`submit`：表單提交事件。
窗口和視口事件
`resize`：窗口或視口大小變化時(shí)觸發(fā)。
`orientationchange`：設(shè)備方向發(fā)生變化時(shí)觸發(fā)（移動(dòng)端）。
`fullscreenchange`：全屏模式切換時(shí)觸發(fā)。
加載和網(wǎng)絡(luò)狀態(tài)事件
- `online`、`offline`：網(wǎng)絡(luò)在線/離線狀態(tài)變化時(shí)觸發(fā)。
- `progress`（xhr, fetch等）：文件上傳下載進(jìn)度事件。
- `error`：資源加載錯(cuò)誤時(shí)觸發(fā)。
- `abort`：請(qǐng)求被中斷時(shí)觸發(fā)。
自定義事件
- `CustomEvent`：開(kāi)發(fā)者可以創(chuàng)建和觸發(fā)自定義事件。
DOM變化事件
- `MutationObserver`：用于監(jiān)聽(tīng)DOM樹(shù)結(jié)構(gòu)變化。
- `IntersectionObserver`：監(jiān)聽(tīng)DOM元素是否可見(jiàn)（與視口的交集變化）。
- `ResizeObserver`：監(jiān)聽(tīng)DOM元素尺寸變化。
- `PerformanceObserver`：監(jiān)聽(tīng)網(wǎng)頁(yè)性能指標(biāo)變化。
直接往 PerformanceObserver() 入?yún)⒛涿卣{(diào)函數(shù)，成功 new 了一個(gè) PerformanceObserver 類的，名為 observer 的對(duì)象
var observer = new PerformanceObserver(function (list, obj) {
? var entries = list.getEntries();
? for (var i = 0; i < entries.length; i++) {
? ? //處理“navigation”和“resource”事件
? }
});
//調(diào)用 observer 對(duì)象的 observe() 方法
observer.observe({ entryTypes: ["navigation", "resource"] });
移動(dòng)端特有事件
- `deviceorientation` / `deviceorientationabsolute`：設(shè)備方向事件（陀螺儀數(shù)據(jù)）。
- `devicemotion`：設(shè)備運(yùn)動(dòng)事件（加速度計(jì)數(shù)據(jù)）。
- `touchcancel`：觸摸操作因系統(tǒng)原因被取消時(shí)觸發(fā)。
#### 更多高級(jí)事件
- `popstate`：瀏覽器歷史記錄變化（如前進(jìn)、后退）時(shí)觸發(fā)。
- `hashchange`：URL哈希值改變時(shí)觸發(fā)。
- `message`：跨窗口通信時(shí)觸發(fā)。
- `storage`：localStorage或sessionStorage發(fā)生變化時(shí)觸發(fā)。
每個(gè)事件都可以通過(guò) `addEventListener` 方法綁定監(jiān)聽(tīng)器到相應(yīng)的元素或全局對(duì)象（如 `window`）。例如：
javascript
window.addEventListener('load', function() {
? console.log('頁(yè)面已完全加載');
});
document.getElementById('myButton').addEventListener('click', function() {
? console.log('按鈕被點(diǎn)擊');
});
window.addEventListener('resize', function() {
? console.log('窗口大小已改變');
});
document.fonts.onloadingdone? 監(jiān)聽(tīng)頁(yè)面字體文件加載完成。
