html5 事件模型支持捕获和冒泡双阶段，新增 input、invalid、loadeddata、online、beforeinstallprompt 等原生事件，事件委托对语义化标签有效，但需注意兼容性差异。
HTML4 事件模型只支持冒泡，HTML5 支持捕获 + 冒泡双阶段
HTML4 的事件流只有冒泡（bubbling）一种模式：事件从目标元素向上逐级触发到 document。而 HTML5 完整继承 DOM2 级事件模型，addEventListener() 默认启用冒泡，但可显式传入 true 启用捕获阶段——这在处理嵌套表单、模态框遮罩或防止默认行为时非常关键。
- 不写第三个参数 → 冒泡阶段执行：
el.addEventListener('click', handler) - 第三个参数为
true→ 捕获阶段执行：el.addEventListener('click', handler, true) - 旧式
onclick="..."和el.onclick = ...始终只走冒泡，无法捕获 - IE8 及更早版本不支持
addEventListener()，必须用attachEvent()（已淘汰），现代项目可忽略
HTML5 新增的原生事件类型有哪些？
HTML5 不是“发明新事件”，而是将原本依赖 JavaScript 模拟或插件的行为标准化为浏览器原生事件。这些事件大多绑定在特定元素上，且有明确触发条件和兼容性边界。
-
input事件：在<input>、<textarea></textarea>中内容**实时变化**时触发（比change更敏感，支持中文输入法未上屏时的监听） -
invalid事件：表单控件校验失败且提交时触发（仅当checkValidity()返回false且用户点击了submit） -
loadeddata/canplay/timeupdate：视频/音频元素的播放生命周期事件，替代 Flash 时代的手动轮询 -
online/offline：监听浏览器网络状态切换（注意：仅反映 navigator.onLine 值，不保证真实连通性） -
beforeinstallprompt：PWA 安装提示前触发（仅 Chrome/Edge 等支持 PWA 的浏览器）
<input type="email" required>
<script>
document.querySelector('input').addEventListener('invalid', e => {
e.preventDefault(); // 阻止默认气泡提示
console.log('邮箱格式不对');
});
</script>
事件委托在 HTML5 中依然有效，但要注意新元素的冒泡行为
用 document.addEventListener('click', handler) 做事件委托时，HTML5 新增的语义化标签（如 <article></article>、<section></section>）和自定义元素（<my-button></my-button>）默认都支持事件冒泡——这点和 <div> 完全一致，无需额外配置。
<ul>
<li>例外：被 <code>pointer-events: none 或 disabled 属性禁用的元素（如 <button disabled></button>）不会触发任何鼠标事件
<video></video> 元素上的 click 事件在移动端可能被系统 UI（如全屏按钮）拦截，建议优先监听 play 或 pause
<details><summary></summary></details> 时，toggle 事件是 HTML5 新增的，仅在用户点击 summary 展开/收起时触发容易被忽略的兼容性坑：不是所有 HTML5 事件都能回退
比如 input 事件在 IE9+ 支持，但 IE9 对中文输入法的支持极差（常漏触发）；invalid 事件在 Safari 10.1+ 才稳定可用；beforeinstallprompt 在 Firefox 和旧版 Safari 完全不存在。
立即学习“前端免费学习笔记（深入）”；
- 不要用 HTML5 新事件做核心功能兜底，例如把
invalid当唯一校验手段 - 对关键交互，仍需用
submit事件 +form.checkValidity()做服务端前最后一道验证 - 检测事件是否可用，别查浏览器版本，直接用
'oninput' in document或typeof document.createElement('input').oninput === 'function'
timeupdate 的触发频率、online 的延迟判定，这些细节往往比语法更决定体验成败。
