使用示例

// 監聽滾動事件
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）