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