最快但不推荐直接在html中写onclick="addtocart(123)"，因导致结构与逻辑耦合、id硬编码易错、维护困难；应改用data-product-id存数据，addeventlistener批量绑定，并防重复提交、同步按钮状态。
给按钮加 onclick 最快但不推荐
直接在 HTML 里写 onclick="addToCart(123)" 能立刻响应，但会把逻辑和结构混在一起，后续改商品 ID 或加埋点就容易漏、难维护。尤其当页面有多个商品时，硬编码 ID 容易错位，调试时也看不到事件绑定关系。
实操建议：
- 保留按钮的
data-product-id属性，比如：<button class="add-to-cart" data-product-id="456">加入购物车</button> - JS 里用
document.querySelectorAll('.add-to-cart')批量绑定，避免逐个写onclick - 别在 HTML 里调用函数，只存数据，让 JS 统一处理
用 addEventListener 绑定更可控
这是现代写法的标准路径：选中元素 → 监听点击 → 触发函数。好处是解耦、可复用、支持事件委托（比如列表滚动加载后新增的按钮也能自动响应）。
常见错误现象：绑定后点击没反应 —— 大概率是 JS 执行时 DOM 还没加载完，querySelector 返回 null。
实操建议：
- 确保脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
