皮肤切换需先用 removeEventListener 清理旧监听器，确保函数引用一致；推荐事件委托+主题类名分支处理；生命周期中配对绑定/解绑；系统偏好和 storage 监听器也须及时移除。
在多主题音视频播放器中，控制面板皮肤切换不能只改样式，还要确保事件监听器不残留——尤其当同一按钮在不同主题下需绑定不同行为（比如深色模式下音量滑块拖动更灵敏、浅色模式下暂停按钮图标尺寸略大）时，removeEventListener 是清理旧逻辑的关键一步。
皮肤切换前必须先解绑旧监听器
每次切换皮肤时，控制面板 DOM 结构可能重绘（如用 Vue 的 v-if 切换主题组件），或仅更新 class/CSS 变量。无论哪种方式，只要 JS 层曾为按钮、滑块、进度条等元素手动绑定过事件，就必须显式移除：
- 使用与
addEventListener完全相同的函数引用（不能是匿名函数） - 若用箭头函数或内联写法绑定，后续无法精准移除——应提前声明处理函数
- 监听器绑定在
document或window上的（如键盘快捷键），也要一并清理
推荐用事件委托 + 主题类名控制行为分支
避免为每个皮肤重复绑定/解绑，可统一监听父容器，靠当前皮肤类名决定执行逻辑：
- 给播放器根元素（如
<div id="player">）动态添加theme-dark或theme-light类 - 所有交互事件都委托到该容器，内部用
if (player.classList.contains('theme-dark'))分支处理 - 切换皮肤时只需改 class，无需反复
removeEventListener和addEventListener
生命周期中配对管理监听器
在播放器组件初始化和销毁阶段严格配对：
-
mounted（或connectedCallback）中绑定所有控制事件 -
beforeUnmount（或disconnectedCallback）中调用removeEventListener清理 - 若支持运行时热切皮肤（不销毁组件），则在切换函数开头先解绑，再根据新主题重新绑定
注意 storage 事件和系统偏好监听的清理
如果皮肤还响应系统深色模式或 localStorage 主题变更，这些监听器也属于“控制面板皮肤逻辑”的一部分：
-
window.matchMedia('(prefers-color-scheme: dark)')返回的MediaQueryList对象，需保存其引用并在卸载时调用.removeEventListener('change', handler) -
window.addEventListener('storage', ...)同样要在离开页面前移除，否则其他标签页触发主题变更时仍会执行已失效的回调
