必须在监听逻辑不再需要时主动调用removeeventlistener清理，使用命名函数而非匿名函数，并在组件卸载、路由切换等生命周期终点及时移除，确保mediaquery对象和handler变量可访问且作用域一致。
在网页暗黑模式退出时，要彻底卸载皮肤变更监听器，关键不是“退出暗黑模式”这个动作本身，而是当监听逻辑不再需要时（比如页面跳转、组件卸载、SPA 路由切换），主动调用 removeEventListener 清理掉之前绑定的回调函数。
必须用命名函数而非匿名函数注册监听
匿名函数无法被准确移除，因为每次声明都是新引用：
✘ 错误写法（无法清理）：media.addEventListener('change', () => { updateTheme(); });
function handleThemeChange(e) { updateTheme(e.matches); }<br>media.addEventListener('change', handleThemeChange);<br>// 后续可安全移除：<br>media.removeEventListener('change', handleThemeChange);
监听器应在明确生命周期终点及时移除
常见需清理的场景包括：
- React 组件卸载时，在
useEffect的清理函数中调用removeEventListener - Vue 3 的
onBeforeUnmount钩子内执行移除 - 原生 JS 单页应用中，路由离开前手动触发清理（如监听
popstate或使用路由守卫） - 如果使用了
darkmodejs等封装库，直接调用其返回对象的removeListeners()方法
确保 mediaQuery 对象和 handler 是同一作用域变量
移除监听的前提是能访问到当初绑定时的两个关键值：媒体查询对象（MediaQueryList）和处理函数（handler）。建议将它们声明为模块级或组件级变量，避免在闭包中丢失引用。
例如：
let media = null;<br>let handleThemeChange = null;<br><br>function initThemeListener() {<br> media = window.matchMedia('(prefers-color-scheme: dark)');<br> handleThemeChange = (e) => { /* ... */ };<br> media.addEventListener('change', handleThemeChange);<br>}<br><br>function cleanupThemeListener() {<br> if (media && handleThemeChange) {<br> media.removeEventListener('change', handleThemeChange);<br> }<br>}
兼容旧版 Safari 的 addListener 回退也要对应清理
若为兼容 Safari ≤13.1 使用了 addListener，则清理时需用 removeListener：
if (media.addEventListener) {<br> media.addEventListener('change', handler);<br>} else if (media.addListener) {<br> media.addListener(handler);<br>}<br>// 清理时：<br>if (media.removeEventListener) {<br> media.removeEventListener('change', handler);<br>} else if (media.removeListener) {<br> media.removeListener(handler);<br>}
