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事件：在、中内容**实时变化**时触发（比change更敏感，支持中文输入法未上屏时的监听） -
invalid事件：表单控件校验失败且提交时触发（仅当checkValidity()返回false且用户点击了submit） -
loadeddata/canplay/timeupdate：视频/音频元素的播放生命周期事件，替代 Flash 时代的手动轮询 -
online/offline：监听浏览器网络状态切换（注意：仅反映 navigator.onLine 值，不保证真实连通性） -
beforeinstallprompt：PWA 安装提示前触发（仅 Chrome/Edge 等支持 PWA 的浏览器）
事件委托在 HTML5 中依然有效，但要注意新元素的冒泡行为
用 比如 document.addEventListener('click', handler) 做事件委托时，HTML5 新增的语义化标签（如 、）和自定义元素（
pointer-events: none 或 disabled 属性禁用的元素（如 ）不会触发任何鼠标事件 元素上的 click 事件在移动端可能被系统 UI（如全屏按钮）拦截，建议优先监听 play 或 pause
toggle 事件是 HTML5 新增的，仅在用户点击 summary 展开/收起时触发容易被忽略的兼容性坑：不是所有 HTML5 事件都能回退
input 事件在 IE9+ 支持，但 IE9 对中文输入法的支持极差（常漏触发）；invalid 事件在 Safari 10.1+ 才稳定可用；beforeinstallprompt 在 Firefox 和旧版 Safari 完全不存在。
HTML5 事件模型本身没改底层机制，但新增事件类型和更细粒度的生命周期控制，让开发者能少写轮询、少依赖 polyfill。真正要小心的，是那些看似“标准”实则各浏览器实现节奏不一的事件——比如 invalid 当唯一校验手段submit 事件 + form.checkValidity() 做服务端前最后一道验证'oninput' in document 或 typeof document.createElement('input').oninput === 'function'
timeupdate 的触发频率、online 的延迟判定，这些细节往往比语法更决定体验成败。
