onclick等内联事件属性必须清理，因其将HTML结构与JS行为耦合，导致维护困难、无法批量控制、阻碍模块化和测试，且现代框架不支持、原生addEventListener忽略、无法统一拦截事件、调试困难、压缩工具不处理。
为什么 onclick 这类内联事件属性现在要被清理
因为它们把结构（HTML）和行为（JS）硬绑在一起，导致维护困难、无法批量控制事件、阻碍模块化和测试。现代框架（React/Vue）完全不支持这种写法，连原生 addEventListener 都默认忽略内联绑定的事件监听器。
更实际的问题是：你没法用 event.stopPropagation() 或 event.preventDefault() 统一拦截这些内联事件；调试时也看不到它们在哪儿注册的；压缩工具（如 Terser）根本不会处理它们——它们就卡死在 HTML 里，成了技术债。
哪些属性属于必须清理的“原生事件内联属性”
所有以 on 开头、后面接事件名的小写属性，且值为 JS 字符串或函数调用。常见但危险的包括：
-
onclick、onchange、onsubmit -
onload（尤其在<img>或<body>上） -
onerror（比如<img onerror="this.src='fallback.jpg'">） -
onmouseover/onmouseout（常被用来模拟 hover，但应改用 CSS 或委托）
注意：oninput 和 onfocus 看似无害，但只要写在 HTML 标签里，就属于审查目标——无论有没有副作用，统一移除。
立即学习“前端免费学习笔记（深入）”；
怎么安全地替换成 addEventListener
不是简单地把 onclick="doSomething()" 换成 addEventListener('click', doSomething) 就完事。关键在作用域、执行时机和 this 指向。
- 确保 DOM 已加载：把事件绑定逻辑放在
DOMContentLoaded回调里，或用defer加载 JS 文件 - 避免重复绑定：不要在循环中对同一元素多次调用
addEventListener，否则会触发多次 - 别直接传字符串：
onclick="alert(1)"→ 必须提取成函数，再传函数引用，不能写addEventListener('click', () => alert(1))（闭包难测、难卸载） - 需要访问元素自身？用事件对象：
e.target或e.currentTarget，而不是依赖this（箭头函数里this是外层作用域）
示例对比：
<!-- 错误 -->
<button onclick="handleClick(this, 'save')">保存</button>
<p><!-- 正确 -->
<button data-action="save">保存</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-action]').forEach(btn =>
btn.addEventListener('click', handleClick)
);
});
function handleClick(e) {
const action = e.currentTarget.dataset.action;
// 处理逻辑
}
</script>审查时容易漏掉的隐蔽位置
内联事件不止出现在手写的 HTML 里。以下地方常被忽略，但同样要扫：
- 服务端模板生成的 HTML：如 Django 的
{{ item|safe }}、PHP 的echo "<div onclick=...>"—— 这些得改模板逻辑，不是前端能 patch 的 - 第三方组件输出的 HTML：某些富文本编辑器（如 TinyMCE）导出内容时会保留
onclick，需配置其输出过滤器 - 旧版 CMS 导出的静态页：用
grep -r "on[a-z]*=" ./public/扫一遍，比肉眼检查靠谱 -
javascript:void(0)链接里的onclick：这类伪链接往往还带着href="#"，其实该全换成button+ ARIA
真正麻烦的不是找到它们，而是确认每个替换后的行为是否一致——特别是带 return false 或内联 event.preventDefault() 的场景。建议先加日志，再逐步替换，别一次性全删。
