输入元素的“输入”和“更改”事件之间有什么区别？

输入元素的输入与更改事件

HTML 中的输入元素允许用户输入和编辑文本。它支持两个事件处理程序：更改和输入。这两个事件都会在元素的文本内容被修改时触发，但它们的行为有细微的差别。

'input' 事件

input 事件发生在每当对元素的文本内容进行任何更改，包括：

• 键入字符
• 删除字符
• 选择文本
• 粘贴文本

它通常用于动态验证输入数据并向用户提供即时反馈。

'change' 事件

The当对文本内容进行更改后元素失去焦点时，会发生更改事件。换句话说，在触发更改事件之前，用户必须同时修改文本并将焦点移离元素。

除了失去焦点之外，更改事件还可能由以下方式触发：

• 按 Enter 键
• 在下拉列表中选择一个选项
• 更改复选框的选中状态

jQuery 中的使用

您可以使用 jQuery 将事件侦听器附加到输入元素，如下所示：

$('input[type="text"]').on('change', function() {
    alert($(this).val());
});

// Equivalent to using 'input' instead of 'change'
$('input[type="text"]').on('input', function() {
    alert($(this).val());
});

事件排序

当输入和更改时事件附加到同一元素，它们将按以下顺序触发：

1. On Input: Triggered every time the text content changes
2. On Change: Triggered when the element loses focus after the text content changes

此行为允许您使用输入事件处理即时更改，并在元素因更改事件失去焦点时执行操作.

示例

以下示例演示了输入事件和更改事件之间的区别：

$("input, select").on("input", function () {
    console.log("On input: " + this.tagName + " | " + this.value);
}).on("change", function () {
    console.log("On change: " + this.tagName + " | " + this.value);
});

在文本输入中键入内容或选择文本时下拉列表中的选项，您将看到以下输出：

On input: INPUT | ...
On change: INPUT | ...

请注意，每次击键或字符更改都会触发输入，而只有在失去焦点时才会触发更改。

以上是输入元素的“输入”和“更改”事件之间有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！