步骤条用事件委托实现进度跳转：仅容器绑定click监听，通过closest()识别data-step-index目标项，校验targetIndex≤currentStep或已在completedSteps中后执行goToStep并派发stepchange事件，同时支持键盘操作与可访问性。
在步骤条组件中用事件委托处理进度跳转，核心是：**只给步骤条容器绑定一个事件监听器，通过事件冒泡识别点击的是哪个步骤节点，并校验跳转合法性后更新状态**。这样避免为每个步骤项重复绑定事件，也便于动态增删步骤时保持逻辑稳定。
1. 结构设计：给步骤项添加可识别的标记
确保每个步骤节点（如 <li> 或 <div class="step-item">）有明确的标识，推荐使用 data-step-index 属性：
<li class="step-item" data-step-index="0">填写信息</li>
<li class="step-item" data-step-index="1">确认订单</li>
<li class="step-item" data-step-index="2">支付完成</li>
</ul>
2. 绑定委托事件并提取目标步骤
监听容器（如 #stepper）的 click 事件，用 event.target 向上查找带 data-step-index 的最近步骤项：
- 用
closest()精准匹配，避免误判子元素（如图标、文字） - 检查是否真点击到了有效步骤项，而非空白区域或非步骤节点
stepper.addEventListener('click', (e) => {
const stepItem = e.target.closest('.step-item');
if (!stepItem) return;
const targetIndex = Number(stepItem.dataset.stepIndex);
// 后续校验与跳转逻辑
});
3. 校验跳转合法性再执行状态变更
不是所有步骤都允许任意跳转——通常只允许跳转到已完成步骤或当前步骤的下一个（取决于产品逻辑）。常见策略：
立即学习“Java免费学习笔记（深入）”；
- 仅允许前向跳转到已激活/已完成步骤：比如当前在第 1 步（索引 1），可点第 0 步（返回），也可点第 1 步（刷新），但不能点第 2 步（除非第 1 步已提交成功）
- 记录当前激活步骤索引（如
currentStep）和已完成步骤集合（如completedSteps = new Set([0, 1])） - 点击时判断：
targetIndex <= currentStep || completedSteps.has(targetIndex)
校验通过后，更新 UI（如添加 .active / .done 类）并触发自定义事件或调用跳转方法：
goToStep(targetIndex); // 封装好的跳转函数
stepper.dispatchEvent(new CustomEvent('stepchange', { detail: { to: targetIndex } }));
}
4. 注意交互细节与可访问性
事件委托本身不改变语义，但需额外保障体验：
- 给步骤项加
role="button"和tabindex="0"，支持键盘聚焦 - 监听
Enter/Space键，触发相同跳转逻辑 - 禁用不可跳转的步骤时，建议用
aria-disabled="true"而非仅 CSS 灰显
例如在事件处理器中补充键盘支持：
stepper.addEventListener('keydown', (e) => {if (e.key !== 'Enter' && e.key !== ' ') return;
const stepItem = e.target.closest('.step-item');
if (!stepItem) return;
e.preventDefault();
const targetIndex = Number(stepItem.dataset.stepIndex);
// 同样走校验 + 跳转逻辑
});
