使用示例

// 监听滚动事件
useEffect(() => {const handleScroll = () => {console.log("当前滚动位置:", window.scrollY);};window.addEventListener("scroll", handleScroll);return () => window.removeEventListener("scroll", handleScroll);
}, []);// 监听路由哈希变化
useEffect(() => {const handleHashChange = () => {console.log("当前哈希:", window.location.hash);};window.addEventListener("hashchange", handleHashChange);return () => window.removeEventListener("hashchange", handleHashChange);
}, []);

1. 窗口/视图相关事件

事件类型	描述
resize	窗口大小改变时触发（最常用）
scroll	滚动页面时触发（可用于检测滚动位置）
load	页面完全加载后触发（包括所有资源）
DOMContentLoaded	HTML 文档解析完成时触发（无需等待样式/图片）
beforeunload	页面卸载前触发（用于阻止意外离开）
unload	页面卸载时触发（资源清理）

2. 鼠标事件

事件类型	描述
click	点击元素时触发（按下并释放）
dblclick	双击元素时触发
mousedown	鼠标按下时触发
mouseup	鼠标释放时触发
mousemove	鼠标在元素上移动时连续触发
mouseover	鼠标移入元素时触发（会冒泡）
mouseout	鼠标移出元素时触发（会冒泡）
mouseenter	鼠标移入元素时触发（不冒泡）
mouseleave	鼠标移出元素时触发（不冒泡）
contextmenu	右键点击时触发（打开上下文菜单前）

3. 键盘事件

事件类型	描述
keydown	键盘按键按下时触发
keyup	键盘按键释放时触发
keypress	按下产生字符的键时触发（已弃用，建议用 keydown 代替）

4. 焦点事件

事件类型	描述
focus	元素获得焦点时触发（不冒泡）
blur	元素失去焦点时触发（不冒泡）
focusin	元素即将获得焦点时触发（会冒泡）
focusout	元素即将失去焦点时触发（会冒泡）

5. 表单事件

事件类型	描述
change	表单元素值改变并提交时触发（如输入框失焦后）
input	表单元素值改变时立即触发（实时响应）
submit	表单提交时触发
reset	表单重置时触发

6. 触摸事件（移动端）

事件类型	描述
touchstart	手指触摸屏幕时触发
touchmove	手指在屏幕上滑动时连续触发
touchend	手指离开屏幕时触发
touchcancel	触摸被意外中断时触发（如来电）

7. 其他重要事件

事件类型	描述
hashchange	URL 的哈希部分变化时触发（单页应用路由常用）
popstate	浏览器历史记录变化时触发（如前进/后退）
online/offline	网络连接状态变化时触发
storage	Web Storage 变化时触发（localStorage/sessionStorage）