onchange 事件角度选择 - Javascript (1)

📌 相关文章

📜 onchange 事件角度选择 - Javascript (1)

📅 最后修改于: 2023-12-03 15:18:06.251000 🧑 作者: Mango

Javascript 中的 onchange 事件

简介

onchange 事件是 Javascript 中的一种事件类型，它在当元素的值发生改变时被触发。这个事件通常应用于表单元素，比如 select、textarea 和 input 等。

语法

onchange 事件可以通过 HTML 或者 Javascript 代码来绑定。HTML 绑定方式如下：

<select onchange="myFunction()">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Javascript 绑定方式如下：

// 获取元素
var select = document.getElementById("mySelect");

// 绑定 onchange 事件
select.onchange = function() {
  alert("你选择了 " + select.value);
};

需要注意的是，当使用 Javascript 绑定方式时，onchange 事件只能被绑定到一次函数中。

示例

下面是一个示例，演示了如何使用 onchange 事件来改变页面的背景颜色：

<!DOCTYPE html>
<html>
<body>

  <h2>选择一个颜色:</h2>
  <select id="color" onchange="changeColor()">
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
  </select>

  <script>
    function changeColor() {
      var color = document.getElementById("color").value;
      document.body.style.backgroundColor = color;
    }
  </script>

</body>
</html>

总结

onchange 事件是 Javascript 中的一种事件类型，它可以在表单元素的值发生改变时被触发。我们可以使用 HTML 或者 Javascript 代码来绑定 onchange 事件。

通过 onchange 事件，我们可以实现很多有趣的效果，比如改变页面背景颜色、隐藏或显示某些元素等等。