HTML属性不执行JS，仅作语义化标记和元数据容器；JS通过data-*属性读取参数并用addEventListener绑定事件，确保可维护、无覆盖、易清理。
HTML 属性本身不执行 JS，但你可以用它作为“开关”或“参数容器”，真正干活的永远是 JS 逻辑——关键不是让属性“支持交互”，而是让它和 JS 形成可预测、易维护的配合链。
onclick 等内联事件属性为什么容易出问题
直接写 onclick="handleClick(123)" 看似省事，实际埋了三个坑：
- 函数必须全局可访问，污染作用域；
- 参数是字符串字面量，
onclick="handleClick(user.id)"会报错（user is not defined）； - 无法解绑、无法复用、无法做条件判断——比如“只在登录后才响应点击”。
更稳妥的做法：HTML 只留语义化结构和必要元数据，JS 负责绑定与调度。
data-* 属性才是你该依赖的“通信信道”
dataset 是 HTML5 原生支持的桥梁，比 getAttribute 更安全、更自动。例如：
立即学习“前端免费学习笔记（深入）”；
<button data-action="delete" data-id="42" data-confirm="确定删除？">删</button>
JS 中这样读取：
button.addEventListener('click', function(e) {
const { action, id, confirm } = e.target.dataset;
if (confirm && !window.confirm(confirm)) return;
if (action === 'delete') api.delete(+id); // +id 转数字
});注意点：
-
data-user-id→ JS 中是dataset.userId（自动驼峰转换）； -
dataset值永远是字符串，数字要手动转； - 别存 JSON 字符串，解析成本高，调试困难。
为什么 addEventListener 比 onclick= 更可靠
核心差异就一条：onclick = handler 是赋值操作，后一次会覆盖前一次；addEventListener 是注册操作，支持无限叠加。
典型翻车场景：
- 循环渲染按钮时用
var i+onclick = function() { console.log(i) }→ 全输出最后一个值； - 第三方库和你自己都给同一个按钮绑了 click → 只有后者生效。
正确写法（无需闭包）：
buttons.forEach((btn, i) => {
btn.addEventListener('click', () => {
console.log('第', i, '个按钮被点');
});
});DOM 加载时机不对，一切交互都白搭
90% 的 Cannot read property 'addEventListener' of null 错误，不是代码写错了，是脚本执行得太早。
三种应对方式（按推荐顺序）：
- 把
<script>放在</body>前 —— 最简单，适合小页面； - 用
DOMContentLoaded事件包裹初始化逻辑 —— 推荐，兼容性好，不等图片/样式加载完； - 避免用
window.onload—— 它等所有资源（含图片、字体）加载完才触发，延迟明显。
最简健壮写法：
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('submitBtn').addEventListener('click', handleSubmit);
});复杂单页应用里，还要注意组件卸载时清理监听器，否则内存泄漏；removeEventListener 必须传入**同一个函数引用**，所以别用匿名函数。
