如何在每次鼠标按下时为按钮添加样式？

<button id="myButton">点击我</button>

#myButton {
  /* 默认样式 */
  background-color: #ccc;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

#myButton.active {
  /* 按下时的样式 */
  background-color: #f00;
}

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

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

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