用事件冒泡实现星级评分，核心是将click和mouseenter事件委托给父容器，通过event.target识别目标星星，动态设置高亮与选中状态，并支持悬停预览、数据存储与重置。
用事件冒泡实现星级评分，核心是把点击事件绑定在父容器上，利用 event.target 判断哪个星星被点，再统一处理高亮和选中逻辑——这样只需一个监听器，代码简洁、性能好、动态增减星星也不用重新绑定。
结构准备：用内联元素排布星星
用 ★ 实体或 Unicode 字符（★）或 Font Awesome 图标都行，关键是所有星星放在同一个父容器里，且保持顺序。例如：
<div class="star-rating"> <span data-value="1">★</span> <span data-value="2">★</span> <span data-value="3">★</span> <span data-value="4">★</span> <span data-value="5">★</span> </div>
每个 <span></span> 带 data-value 标识分值，方便后续读取。
绑定事件并利用冒泡响应点击
给父容器绑定一次 click，在回调中获取被点击的星星元素，并遍历所有子元素设置状态：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 用
event.target拿到实际被点的<span></span> - 检查它是否带
data-value，避免误触空白区域 - 用
parseInt(target.dataset.value)得到当前选中分数 - 遍历所有子
span，对value ≤ 当前分的设为高亮（如加 classactive），其余清空
支持鼠标悬停预览（半星效果可选）
用 mouseenter + 事件委托模拟“悬停到第 n 颗星，就高亮前 n 颗”：
- 同样监听父容器的
mouseenter - 根据
event.target.dataset.value获取悬停星级 - 临时高亮从第 1 颗到该颗（不修改真实选中值）
- 加
mouseleave回退到已选中的状态（如果已有值）
注意：悬停不影响最终提交值，只用于视觉反馈。
保存与重置状态
选中后建议把分数存到变量或 data-score 属性中，方便表单提交或后续读取：
- 点击后更新
starRating.dataset.score = selectedValue - 可额外加个「重置」按钮，清空高亮并设
dataset.score = "" - 初始化时若已有默认分（比如后端返回 3），可用 JS 主动触发一次高亮逻辑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
