HTML5不推荐使用内联事件属性（如onclick），应改用addEventListener()——它支持事件捕获、阻止默认行为、多次绑定及options配置，且符合关注点分离原则。
HTML 内联事件属性（onclick）已不推荐用于现代页面
HTML5 规范并未移除 onclick、onsubmit 等内联事件属性，但它们属于“过时的（obsolete）”用法——不是语法错误，但违背分离关注点原则，且无法支持事件捕获、阻止默认行为链式控制等关键能力。
真实项目中，你遇到的典型问题包括：onclick="handleClick(this)" 里 this 指向混乱、无法动态增删监听器、调试时看不到事件绑定来源、与框架（如 React/Vue）混用时冲突。
- 内联写法绑定的函数在全局作用域执行，容易污染
window - 无法使用
event.stopPropagation()或event.stopImmediatePropagation()精确控制冒泡流 - 多个相同事件（如两个
onclick）会覆盖而非叠加
addEventListener() 是标准事件模型的唯一可靠入口
所有现代浏览器（含 IE9+）都支持 addEventListener()，它把事件注册、触发逻辑和 DOM 节点解耦，是 HTML5 推荐的唯一事件绑定方式。
注意：IE8 及更早版本用 attachEvent()，但若你仍需兼容 IE8，应使用封装库（如 jQuery）或自行 polyfill；当前绝大多数生产环境可安全弃用。
立即学习“前端免费学习笔记（深入）”；
- 同一个元素可对同一事件类型添加多个监听器，按注册顺序执行
- 支持第三个参数
useCapture（布尔值），控制是否在捕获阶段触发 - 支持
options对象（如{ once: true, passive: true }），提升滚动/触摸性能
document.getElementById('myBtn').addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认行为（如跳转）
console.log('Clicked via addEventListener');
}, { once: true }); // 执行一次后自动移除
如何安全迁移旧内联事件到标准模型
不要直接删掉 onclick 属性再加 addEventListener() —— 页面可能有其他脚本依赖该属性存在，或服务端模板动态生成了它。迁移重点是「接管」而非「替换」。
- 先检查是否有重复绑定：用
getEventListeners(document.getElementById('x'))（Chrome DevTools 控制台）确认当前监听器列表 - 若原内联函数是全局定义（如
function handleClick() {...}），可直接复用：el.addEventListener('click', handleClick)，但注意this指向变为绑定元素，非window - 避免用匿名函数包裹旧调用（如
el.addEventListener('click', () => handleClick())），这会丢失原始event参数和上下文 -
表单提交类事件（
onsubmit）务必在监听器中显式调用e.preventDefault()，否则页面仍会刷新
特殊场景：动态插入的元素怎样绑定事件
直接对 document.createElement() 出来的节点调用 addEventListener() 没问题，但若 HTML 字符串通过 innerHTML 插入，其中的内联事件（onclick）会执行，而你手动绑定的监听器不会自动应用到新节点上。
此时有两个选择：
- 插入后遍历新节点，对匹配选择器的元素逐个绑定（适合少量、结构固定的插入）
- 使用事件委托：在父容器上监听事件，用
e.target.matches('.js-submit-btn')判断触发源（推荐，性能好、无遗漏风险）
document.querySelector('#form-container').addEventListener('click', function (e) {
if (e.target.matches('[data-action="save"]')) {
e.preventDefault();
saveData(e.target.dataset.id);
}
});
事件委托的关键是别忘了检查 e.target 是否是你真正想响应的元素，而不是它的子元素（比如按钮里的图标）。
