onpause不是html原生事件属性,浏览器会静默忽略;真正可用的是pause事件,需通过addeventlistener、onpause手动dispatch或旧版ie兼容方式绑定。

onpause 是什么事件?它根本不存在
HTML 原生没有 onpause 这个事件属性。你写 <video onpause="handler()"></video> 或在 JS 里写 el.onpause = ...,浏览器会静默忽略——既不报错,也不触发,代码看似“没毛病”,但永远执行不到。
真正可用的是 pause 事件,它属于 HTMLMediaElement(即 <audio></audio> 和 <video></video> 元素),必须用标准事件监听方式注册。
正确绑定 pause 事件的三种方式
所有方式都作用于已存在的媒体元素,比如 <video id="myVideo"></video>:
-
推荐:addEventListener —— 支持多次绑定、可移除、语义清晰:
const video = document.getElementById('myVideo');<br>video.addEventListener('pause', () => {<br> console.log('用户暂停了播放');<br>}); -
内联属性无效,但 onpause 属性名可被赋值(不推荐) —— 虽然
onpause不是标准事件处理器属性,但浏览器允许你给元素挂载任意onXxx属性;不过它不会自动关联事件,必须手动 dispatch:video.onpause = () => { /* 不会自动触发 */ };<br>// 若想让它生效,得自己调用:<br>// video.dispatchEvent(new Event('pause')); - 使用 addEventListener 的兼容写法 —— 如果要支持旧版 IE(attachEvent,但现代项目基本无需考虑。
pause 事件触发的常见时机和陷阱
pause 事件只在媒体**明确被暂停**时触发,不是所有“停止播放”的情况都会触发它:
- 用户点击暂停按钮 → 触发
pause - 调用
video.pause()→ 触发pause - 播放结束(
ended)→ 不触发pause,而是触发ended - 网络中断或加载失败 → 触发
error或stalled,不触发pause - 页面切到后台、浏览器休眠 → 大多数浏览器会暂停媒体,但 不一定触发
pause事件(行为不一致,别依赖它)
如果你需要区分“主动暂停”和“被动中断”,得结合 paused 属性 + 其他事件(如 timeupdate、waiting)交叉判断。
为什么不能用 onpause="xxx()" 写在 HTML 里?
因为 HTML 解析器会把 onpause 当作普通自定义属性(类似 data-pause),而不是事件处理器。它不会被映射为 JavaScript 的 onpause 属性,也不会自动绑定监听器。
对比一下有效写法:
✅ <video onplay="console.log('play')"></video> —— onplay 是标准属性,会被映射为 el.onplay,且能工作(但依然不推荐)
❌ <video onpause="console.log('pause')"></video> —— onpause 不是标准属性,完全被忽略
简单记:只有 onload、onerror、onplay、oncanplay 等少数几个是内置可写的事件属性;pause、seeking、ratechange 等必须用 addEventListener。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











