要实现可交互的评价按钮，需绑定domcontentloaded事件监听、用data-value标记星级分值、通过事件委托处理动态元素、设置type="button"避免跳转、提交时禁用按钮并提供状态反馈。
直接在页面里加一个能点、能提交、还能回显的评价按钮，不是只放个 <button></button> 就完事。核心在于：按钮要触发声效/状态反馈，点击后得收集评分（比如星级），还得把数据传出去——哪怕只是 console.log 一下，也得走通这个链路。
怎么让按钮真正“可交互”，而不是纯装饰
很多初学者把 <button></button> 写进 HTML 就以为完成了，结果点击没反应。原因通常是：没绑定事件监听，或者监听时机错了（比如 DOM 还没加载完就执行 JS）。
- 必须等 DOM 加载完成再操作，推荐用
document.addEventListener('DOMContentLoaded', ...)，别用window.onload（太晚） - 按钮要有明确的
id或class，避免用模糊选择器如document.querySelector('button')——万一页面有多个 button 就绑错对象 - 如果按钮是动态插入的（比如 AJAX 加载后追加），得用事件委托，监听父容器的
click事件，再用event.target.matches('.submit-rating')判断是否点中目标
星级评分按钮怎么和数值关联起来
用户点第三颗星，你得知道他评的是 3 分，而不是只高亮星星。常见错误是只改样式，不存值。
- 用
data-value属性标记每颗星的分值，比如<i class="star" data-value="3"></i> - 监听整个星级容器的
click，而非单个星——这样能统一处理，避免重复绑定 - 点完立刻更新隐藏的
<input type="hidden" name="rating">，方便后续表单提交；别只靠 JS 变量存，一刷新就丢 - 注意：移动端 click 有 300ms 延迟，用
touchstart替代（但需防误触，加简单节流）
提交时怎么避免页面跳转或重复提交
默认 <button type="submit"></button> 在表单里会触发页面刷新，而你往往只想发个 fetch 请求或做本地验证。
- 明确设置
type="button"，除非它真在<form></form>里且你有意提交 - 如果用了
<form></form>，务必在 submit 事件里调用e.preventDefault()——但注意：这会绕过原生required校验，得手动检查 - 提交后立即禁用按钮（
button.disabled = true），防止手抖连点；成功后恢复，失败则给出提示并解除禁用 - fetch 提交时记得设
headers: {'Content-Type': 'application/json'}，后端才容易解析
最常被忽略的点：按钮状态变化没反馈给用户。点了没反应、提交中没 loading、成功后没提示——这些不是“锦上添花”，而是用户确认操作是否生效的唯一依据。哪怕只加一行 button.textContent = '提交中...'，体验也比干等强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
