HTML | 切换事件属性

在 HTML 中，切换事件属性可以用来监听当用户在表单元素上切换选项时的事件。

1. checked 属性

选项框 (checkbox) 和单选框 (radio) 中的 checked 属性可以返回或设置元素是否被选中。

语法

<input type="checkbox" checked>
<input type="radio" checked>

说明

• 选项框中的 checked 属性为布尔属性，若被设置，则该选项会被默认选中。
• 单选框中的 checked 属性也为布尔属性，但同时只能有一个被选中。
• 使用 JavaScript 也可来操作该属性。

2. onchange 事件

当表单元素的值改变时，onchange 事件会被触发。常用于监听下拉菜单和输入框的改变。

语法

<select onchange="changeText(this.value)">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<input type="text" onchange="changeText(this.value)">

说明

• onchange 事件可以绑定到大多数表单元素上，如文本框、下拉菜单、单选框等。
• 该事件仅在表单元素失去焦点时才会触发。
• 在使用 onchange 事件改变表单值时，需要注意不同浏览器的兼容性问题。

3. onclick 事件

点击某个按钮时，onclick 事件会被触发。可用于监听来自不同按钮的点击事件，从而执行不同的操作。

语法

<button onclick="changeText('按钮被点击了')">点击我</button>

说明

• onclick 事件绑定到按钮或页面元素的方法将在按钮或其他元素被点击时被调用。
• onclick 同样可绑定到图片和链接等元素上。
• 注意不要滥用 onclick 事件，而应使用正确的语义化标签和事件来完成更好的交互效果。

4. onfocus 事件

当表单元素获得焦点时，onfocus 事件会被触发。常用于验证表单的正确性或提示用户填写必填项。

语法

<input type="text" onfocus="checkValue()">

说明

• onfocus 事件设计来根据焦点状态处理表单元素。
• 使用 onfocus 事件，可使表单更加可交互，帮助用户快速了解表单元素的情况。

以上是 HTML 中常用的几种切换事件属性，它们在表单交互中发挥了重要作用，使得用户能够更加舒适地完成表单操作。