一.浏览器监听事件有哪些
浏览器监听事件涵盖了用户交互、页面加载、资源加载、DOM变化等多个方面，以下是一份较为详细的浏览器事件大全：
页面加载和生命周期事件
`DOMContentLoaded`：当初始HTML文档被加载并解析完毕时触发，但不包括样式表、图像等外部资源。
`load`：当整个页面包括所有外部资源如图片、样式表等都已完成加载时触发。
`beforeunload`：页面即将卸载时触发，通常用于阻止用户离开页面或询问是否保存未提交的数据。
`unload`：页面正在卸载时触发，但此事件在某些现代浏览器中可能不可靠。
`pageshow` / `pagehide`：页面显示或隐藏时触发，与浏览器的历史记录有关。
用户交互事件
`click`、`dblclick`：鼠标单击、双击事件。
`mousedown`、`mouseup`、`mousemove`、`mouseover`、`mouseout`、`mouseenter`、`mouseleave`、`contextmenu`：鼠标相关事件。
`touchstart`、`touchmove`、`touchend`、`touchcancel`：触摸设备上的触摸事件。
`keydown`、`keyup`、`keypress`：键盘按键事件。
`scroll`：滚动事件。
`focus`、`blur`：元素获取或失去焦点事件。
`input`、`change`：表单元素内容改变事件。
`formchange`、`forminput`（部分浏览器支持）：表单数据变化事件。
`submit`：表单提交事件。
窗口和视口事件
`resize`：窗口或视口大小变化时触发。
`orientationchange`：设备方向发生变化时触发（移动端）。
`fullscreenchange`：全屏模式切换时触发。
加载和网络状态事件
- `online`、`offline`：网络在线/离线状态变化时触发。
- `progress`（xhr, fetch等）：文件上传下载进度事件。
- `error`：资源加载错误时触发。
- `abort`：请求被中断时触发。
自定义事件
- `CustomEvent`：开发者可以创建和触发自定义事件。
DOM变化事件
- `MutationObserver`：用于监听DOM树结构变化。
- `IntersectionObserver`：监听DOM元素是否可见（与视口的交集变化）。
- `ResizeObserver`：监听DOM元素尺寸变化。
- `PerformanceObserver`：监听网页性能指标变化。
直接往 PerformanceObserver() 入参匿名回调函数，成功 new 了一个 PerformanceObserver 类的，名为 observer 的对象
var observer = new PerformanceObserver(function (list, obj) {
var entries = list.getEntries();
for (var i = 0; i < entries.length; i++) {
//处理“navigation”和“resource”事件
}
});
//调用 observer 对象的 observe() 方法
observer.observe({ entryTypes: ["navigation", "resource"] });
移动端特有事件
- `deviceorientation` / `deviceorientationabsolute`：设备方向事件（陀螺仪数据）。
- `devicemotion`：设备运动事件（加速度计数据）。
- `touchcancel`：触摸操作因系统原因被取消时触发。
#### 更多高级事件
- `popstate`：浏览器历史记录变化（如前进、后退）时触发。
- `hashchange`：URL哈希值改变时触发。
- `message`：跨窗口通信时触发。
- `storage`：localStorage或sessionStorage发生变化时触发。
每个事件都可以通过 `addEventListener` 方法绑定监听器到相应的元素或全局对象（如 `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 监听页面字体文件加载完成。
