本文介绍如何通过事件委托与目标判断，为多个按钮绑定单一事件监听器，并确保每次仅响应被点击的按钮，避免事件冲突或误触发。
本文介绍如何通过事件委托与目标判断，为多个按钮绑定单一事件监听器，并确保每次仅响应被点击的按钮，避免事件冲突或误触发。
在实际开发中，常遇到需要为多个相似功能按钮（如“Player one”和“Player two”）分别设置行为，但又希望逻辑集中、互不干扰的场景。原始代码试图在一个 click 监听器内同时处理两个按钮的逻辑，导致后赋值覆盖前赋值（例如先设 player-1，再立即设 player-2），最终仅显示后者——这并非“阻止事件”，而是逻辑顺序错误引发的竞态覆盖。
正确做法是将事件监听器绑定到公共父容器（或 document）上，利用 event.target 精准识别触发源，从而实现“点击谁、响应谁、互不干扰”。以下是推荐实现：
// 获取关键 DOM 元素
const athleteRanking = document.getElementById('athlete-ranking');
const player1Btn = document.getElementById('player-1');
const player2Btn = document.getElementById('player-2');
// 统一监听 document 的 click 事件（也可绑定到共同父级，更安全）
document.addEventListener('click', (e) => {
if (e.target === player1Btn) {
athleteRanking.textContent = player1Btn.textContent; // 推荐用 textContent 替代 innerHTML，防 XSS
} else if (e.target === player2Btn) {
athleteRanking.textContent = player2Btn.textContent;
}
// 其他元素点击时静默忽略，无需 else 分支
});✅ 优势说明：
- 零冲突：每个点击只匹配一个条件分支，天然互斥；
- 可扩展性强：新增按钮只需追加 else if 判断，无需重复添加 addEventListener；
- 性能友好：仅维护一个事件监听器，避免内存泄漏风险；
- 语义清晰：逻辑直白，便于团队协作与后期维护。
⚠️ 注意事项：
- 若按钮是动态生成的，建议将监听器绑定到静态父容器（如 ），并使用 e.target.matches('#player-1') 进行选择器匹配；
- 避免在事件回调中频繁操作 innerHTML（存在 XSS 风险），若内容纯文本，优先使用 textContent；
- 不要调用 e.stopPropagation() 或 e.stopImmediatePropagation()——本方案无需阻止冒泡，因其依赖的是精确的目标比对，而非事件流控制。
总结：与其尝试“停止链式触发”，不如从设计源头规避冗余监听。一个基于 event.target 的集中式事件处理器，既简洁可靠，又符合现代前端工程实践。
