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></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
