事件委托在星级评分组件中通过父容器统一监听mouseenter和click事件，利用target匹配星星元素并根据data-index更新状态，支持动态添加、无障碍访问与键盘操作，轻量且健壮。
事件委托在星级评分组件中非常实用，能避免为每个星星单独绑定事件，同时保证动态添加的星星也能响应交互。核心思路是把鼠标悬停（mouseenter）和点击（click）事件统一绑定到父容器上，再通过事件对象的 target 判断是否点中了某个星星元素，并据此更新视觉状态与评分值。
结构设计：用语义化标签 + data 属性标记星星
推荐使用 <ul></ul> 包裹一组 <li> 星星，每颗星用 <button></button> 或 <i></i> 实现，关键是要有可识别的标识：
- 给每颗星加
data-index（从 1 开始），方便计算当前 hovered 或 clicked 的星级 - 父容器（如
<ul class="star-rating"></ul>）作为事件委托的监听目标 - 避免用纯
<span></span>堆叠，否则无障碍支持和点击精度较差
统一委托：监听父容器的 mouseenter 和 click
只需一次绑定，就能覆盖所有交互场景：
const ratingEl = document.querySelector('.star-rating');
let currentHover = 0; // 记录当前 hover 的星级，用于恢复逻辑
ratingEl.addEventListener('mouseenter', (e) => {
if (e.target.matches('button.star')) {
const index = Number(e.target.dataset.index);
highlightStars(index);
currentHover = index;
}
});
ratingEl.addEventListener('click', (e) => {
if (e.target.matches('button.star')) {
const score = Number(e.target.dataset.index);
setRating(score); // 更新实际评分，比如存入 hidden input 或 state
}
});
注意：mouseenter 不会冒泡，但 mouseover 会——这里用 mouseenter 更安全，配合 matches() 精准捕获目标。
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
视觉反馈：hover 时高亮前 N 颗星，点击后锁定状态
高亮逻辑要区分临时 hover 和已选中状态：
- 悬停时，把从第 1 颗到当前
index的所有星星设为“激活态”（例如加class="active"） - 点击后，记录最终评分，之后只允许再次点击修改，hover 不再影响已选星星的样式（除非你设计成“可拖动重评”）
- 可加一个
data-rated属性或外部变量控制是否处于“已提交”状态，决定 hover 是否生效
边界处理：离开区域时恢复、支持键盘操作
仅靠 mouseenter 不够，还需补充：
- 监听父容器的
mouseleave，清除 hover 样式（但不重置已选评分） - 为无障碍考虑，给每颗按钮加
role="radio"、aria-checked和tabindex="0"，并监听keydown（空格/回车触发点击） - 若支持半星（如点击 3.5 星），可用
offsetX结合宽度比例判断，但需额外处理，基础五星整星场景建议先保持简洁
不需要循环绑定、不怕动态增删星星、HTML 干净、逻辑集中——事件委托让星级组件轻量又健壮。
