HTML | DOM 输入事件

HTML DOM 输入事件是 Web 应用中常见的交互事件之一，它们可以检测用户在表单中输入、删除、键入和提交内容，并允许开发者通过 JavaScript 对这些事件作出反应。

输入事件类型

在 HTML DOM 中，常用的输入事件类型包括：

• onchange：当元素的内容（常用于表单元素）被改变时触发；
• oninput：在用户输入内容时在元素中触发；
• onsubmit：在用户提交表单时触发。

事件响应函数

响应输入事件的函数通常会定义为一个 JavaScript 函数，使用 addEventListener() 或类似的方法将其与指定元素（通常是表单元素）关联。

// 给 id 为 input_text 的元素添加 oninput 事件监听器
document.getElementById("input_text").addEventListener("input", myFunction);

// 定义响应函数
function myFunction() {
  alert("The input value has been changed!");
}

在响应函数中，可以使用预定义变量 event 来检测具体的输入事件类型、触发该事件的元素等属性。

function myFunction(event) {
  var inputText = event.target.value; // 获取触发事件的表单元素的值
  alert("The input value is: " + inputText);
}

输入事件的常用方法

• preventDefault()：阻止事件的默认行为，例如，在 onsubmit 中使用可以防止表单被提交。
• stopPropagation()：防止事件向上冒泡到父级元素，例如，在嵌套元素中使用可以防止点击子元素时触发父元素的点击事件。

总结

HTML DOM 输入事件能够提高 Web 应用的交互性，开发者可以利用它们来实现一些复杂的交互逻辑。熟练掌握输入事件的使用方法，可以帮助开发者更好地定制其应用程序。