HTML | onchange 事件属性

简介

onchange 事件属性在 HTML 中用于触发当用户改变表单域的内容时所执行的 JavaScript 代码。

当在表单元素（input，select或textarea）中输入、选择或修改数据时，触发该事件，使用户可以立即响应表单中的更改。

语法

<!-- 语法格式 -->
<tagname onchange="JavaScriptCode">

<!-- 示例 -->
<input type="text" onchange="myFunction()">

用途

onchange 事件属性通常用于确保表单元素中的数据在用户输入、选择或修改后正确地更新。

这个事件可以应用在包括文本框、下拉列表、单选按钮、复选框等表单控件中。

### 示例 - 当下拉列表选项改变时触发的事件
<!-- HTML 代码 -->
<select id="mySelect" onchange="changeFunc()">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<!-- JavaScript 代码 -->
function changeFunc() {
  var selectBox = document.getElementById("mySelect");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  alert(selectedValue);
}

注意事项

• 仅在表单元素的值发生实际更改时才会触发 onchange 事件。
• onchange 事件必须在表单元素中（例如，input，select或textarea）上指定，因为它们才能触发该事件。
• 如果想要在文本框中跟踪每次更改，请使用 onkeyup 或 onkeydown 事件。

参考链接

• HTML onchange Event Attribute