// 缓存经常访问的元素
const headerElement = document.getElementById("header");
const redButton = document.getElementById("redButton");
const greenButton = document.getElementById("greenButton");

// 为整个文档添加事件监听器，利用事件委托
document.addEventListener("click", function(event) {
  const targetId = event.target.id;
  
  if (targetId === "redButton") {
    headerElement.innerHTML = "Red";
    headerElement.style.color = "red";
    redButton.classList.add("active-red");
    greenButton.classList.remove("active");
  } else if (targetId === "greenButton") {
    headerElement.innerHTML = "Green";
    headerElement.style.color = "green";
    greenButton.classList.add("active-green");
    redButton.classList.remove("active");
  }
});

.active {
  color: white;
}

.active-red {
  color: white;
  background-color: red;
}

.active-green {
  color: black;
  background-color: grey;
}

<h1 id="header">Red Or Green</h1>
<button id="redButton">Red</button>
<button id="greenButton">Green</button>