优化JavaScript按钮状态管理：使用事件委托实现可扩展的互斥点击效果

<input type="button" class="BTN" value="Click Me!">
<input type="button" class="BTN" value="Click Me!">
<input type="button" class="BTN" value="Click Me!">

* {
  padding: 0;
  margin: 0;
}

.BTN {
  background: blue;
  color: white;
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  font-size: 20px;
  border: none;
  font-weight: bold;
}

var a = document.getElementsByClassName("BTN");

// 为每个按钮添加独立的事件监听器，导致代码冗余且难以维护
a[0].addEventListener("click", function() {
  a[0].value = "Done";
  a[0].style.background = "grey";
  a[0].disabled = true; // 注意：应使用 disabled 属性
  a[1].value = "Click Me!";
  a[1].style.background = "blue";
  a[1].disabled = false;
  a[2].value = "Click Me!";
  a[2].style.background = "blue";
  a[2].disabled = false;
});

a[1].addEventListener("click", function() {
  a[1].value = "Done";
  a[1].style.background = "grey";
  a[1].disabled = true;
  a[0].value = "Click Me!";
  a[0].style.background = "blue";
  a[0].disabled = false;
  a[2].value = "Click Me!";
  a[2].style.background = "blue";
  a[2].disabled = false;
});

a[2].addEventListener("click", function() {
  a[2].value = "Done";
  a[2].style.background = "grey";
  a[2].disabled = true;
  a[1].value = "Click Me!";
  a[1].style.background = "blue";
  a[1].disabled = false;
  a[0].value = "Click Me!";
  a[0].style.background = "blue";
  a[0].disabled = false;
});

<div id="buttonContainer">
  <input type="button" class="BTN" value="Click Me!">
  <input type="button" class="BTN" value="Click Me!">
  <input type="button" class="BTN" value="Click Me!">
</div>

* {
  padding: 0;
  margin: 0;
}

.BTN {
  background: blue;
  color: white;
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  font-size: 20px;
  border: none;
  font-weight: bold;
}

const container = document.getElementById("buttonContainer"); // 获取按钮的父容器

// 在父容器上添加一个点击事件监听器
container.addEventListener("click", (e) => {
  // 1. 确定点击目标是否为我们关注的按钮
  // e.target 是实际被点击的元素。closest('.BTN') 从 e.target 向上查找最近的类名为'BTN'的祖先元素。
  const clickedButton = e.target.closest(".BTN");

  // 如果点击的不是带有 .BTN 类的按钮，则直接返回，不执行后续逻辑
  if (!clickedButton) {
    return;
  }

  // 2. 恢复之前已“完成”的按钮状态（如果有的话）
  // 查找容器内当前值为“Done”的按钮（即之前被点击的按钮）
  const previousDoneButton = container.querySelector("[value=Done]");

  if (previousDoneButton) {
    // 如果找到了之前被点击的按钮，将其恢复到初始状态
    previousDoneButton.value = "Click Me!";
    previousDoneButton.style.background = "blue";
    previousDoneButton.disabled = false;
  }

  // 3. 设置当前点击按钮的状态为“完成”
  clickedButton.value = "Done";
  clickedButton.style.background = "grey";
  clickedButton.disabled = true;
});