js按钮单击事件，按钮变颜色

在JavaScript中，可以通过为按钮添加单击事件监听器来改变按钮的颜色。以下是实现这一功能的基础概念和相关代码示例：

基础概念

事件监听器：用于监听特定事件（如点击事件）并在事件发生时执行相应的函数。
DOM操作：通过JavaScript操作HTML文档对象模型（DOM），以改变页面元素的样式或内容。

类型与应用场景

类型：这种交互效果广泛应用于各种网页应用中，特别是在表单提交、导航切换等场景。
应用场景：适用于需要用户明确知道操作已被执行的任何界面元素。

示例代码

以下是一个简单的示例，展示了如何在JavaScript中实现按钮点击后改变颜色的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Color Change</title>
<style>
  .clicked {
    background-color: blue;
    color: white;
  }
</style>
</head>
<body>

<button id="myButton">Click Me!</button>

<script>
  // 获取按钮元素
  var button = document.getElementById('myButton');

  // 添加点击事件监听器
  button.addEventListener('click', function() {
    // 改变按钮的类名，从而改变样式
    button.classList.toggle('clicked');
  });
</script>

</body>
</html>

解释

HTML部分：定义了一个按钮元素，并赋予其ID myButton。
CSS部分：定义了一个名为 .clicked 的类，用于改变按钮的背景颜色和文字颜色。
JavaScript部分：
- 使用 document.getElementById 获取按钮元素。
- 使用 addEventListener 方法为按钮添加点击事件监听器。
- 在事件处理函数中，使用 classList.toggle 方法切换按钮的 clicked 类。如果按钮已经有这个类，则移除它；如果没有，则添加它。