在javascript中更改按钮背景时失去HTML中的悬停和活动样式

<button id="myButton" class="normal">按钮</button>

.normal {
  background-color: #ccc;
}

.hover {
  background-color: #ff0000;
}

.active {
  background-color: #00ff00;
}

var button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
  button.classList.add("hover");
});

button.addEventListener("mouseout", function() {
  button.classList.remove("hover");
});

button.addEventListener("mousedown", function() {
  button.classList.add("active");
});

button.addEventListener("mouseup", function() {
  button.classList.remove("active");
});

<button id="myButton">按钮</button>

button:hover {
  background-color: #ff0000;
}

button:active {
  background-color: #00ff00;
}

var button = document.getElementById("myButton");

button.addEventListener("click", function() {
  button.style.backgroundColor = "#0000ff";
});