表单控件事件处理

表单控件是 Web 前端开发中最基础的组件之一，包括输入框、密码框、下拉框等，这些控件都有自己的事件，例如输入框有 input 事件、下拉框有 change 事件等。在实际开发中，我们需要掌握如何处理这些事件，以实现相应的业务逻辑。

处理输入框事件

输入框是表单控件中最常用的组件之一，常用的事件有 input 和 change 事件，其中 input 事件在用户输入每个字符时都会触发，而 change 事件在输入框失去焦点时触发。

<input type="text" id="input-box" />

const inputBox = document.getElementById("input-box");
inputBox.addEventListener("input", (event) => {
  console.log(event.target.value); // 打印输入框中的值
});

inputBox.addEventListener("change", (event) => {
  console.log(event.target.value); // 打印输入框中的值
});

处理 textarea 事件

textarea 的事件和 input 类似，这里就不再介绍了。

处理 select 下拉框事件

下拉框是另一种常用的表单控件，它有一个 change 事件，当用户选择不同的选项时会触发该事件。

<select id="select-box">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

const selectBox = document.getElementById("select-box");
selectBox.addEventListener("change", (event) => {
  console.log(event.target.value); // 打印用户选择的值
});

处理 checkbox 多选框事件

多选框是一种特殊的表单控件，它有一个 click 事件，在用户点击多选框时触发。

<input type="checkbox" id="checkbox" />

const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("click", (event) => {
  console.log(event.target.checked); // 打印多选框的选中状态
});

处理多个复选框事件，并将选中的复选框的值保存到数组中，可以使用以下代码：

<input type="checkbox" id="option1" name="options" value="1" />
<label for="option1">选项 1</label>

<input type="checkbox" id="option2" name="options" value="2" />
<label for="option2">选项 2</label>

<input type="checkbox" id="option3" name="options" value="3" />
<label for="option3">选项 3</label>

在上面的示例中，我们有三个复选框，它们都有相同的 name 属性，因此它们是一组复选框。我们可以通过 querySelectorAll 方法获取这组复选框，并为每个复选框添加 click 事件监听器。

const checkboxes = document.querySelectorAll("input[name=options]");
const selectedOptions = [];

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener("click", (event) => {
    if (event.target.checked) {
      selectedOptions.push(event.target.value);
    } else {
      const index = selectedOptions.indexOf(event.target.value);
      if (index > -1) {
        selectedOptions.splice(index, 1);
      }
    }
    console.log(selectedOptions);
  });
});

在事件监听器中，我们首先判断当前复选框的选中状态，如果选中了，就将该复选框的值添加到 selectedOptions 数组中，如果取消选中，就从 selectedOptions 数组中移除该值。最后，我们打印 selectedOptions 数组，以便查看当前选中的复选框的值。

处理 Radio 单选按钮事件

处理单个和多个单选框事件的方法类似于处理多个复选框事件。以下是一个示例：

<label>
  <input type="radio" name="options" value="1" />
  选项 1
</label>

<label>
  <input type="radio" name="options" value="2" />
  选项 2
</label>

<label>
  <input type="radio" name="options" value="3" />
  选项 3
</label>

在上面的示例中，我们有三个单选框，它们都有相同的 name 属性，因此它们是一组单选框。我们可以通过 querySelectorAll 方法获取这组单选框，并为每个单选框添加 click 事件监听器。

const radioButtons = document.querySelectorAll("input[name=options]");
let selectedOption;

radioButtons.forEach((radioButton) => {
  radioButton.addEventListener("click", (event) => {
    selectedOption = event.target.value;
    console.log(selectedOption);
  });
});

在事件监听器中，我们将当前单选框的值保存在 selectedOption 变量中。这样，当用户点击不同的单选框时，selectedOption 变量的值就会更新。最后，我们打印 selectedOption 变量，以便查看当前选中的单选框的值。

总结

处理表单控件的事件是 Web 前端开发中必不可少的技能之一，通过处理表单控件的事件，我们可以轻松地实现各种各样的业务逻辑。