What are the Differences Between \'input\' and \'change\' Events for input Elements?

Input vs. Change Events for input Elements

The input element in HTML allows users to enter and edit text. It supports two event handlers: change and input. Both events are triggered when the text content of the element is modified, but they have subtle differences in their behavior.

'input' Event

The input event occurs whenever any change is made to the element's text content, including:

• Typing a character
• Deleting a character
• Selecting text
• Pasting text

It is typically used to validate input data on the fly and provide immediate feedback to the user.

'change' Event

The change event occurs when the element loses focus after a change has been made to the text content. In other words, the user must both modify the text and move the focus away from the element before the change event is triggered.

In addition to losing focus, the change event may also be triggered by:

• Pressing the Enter key
• Selecting an option in a dropdown
• Changing the checked state of a checkbox

Usage in jQuery

You can attach event listeners to input elements using jQuery as follows:

$('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());
});

Event Ordering

When both input and change events are attached to the same element, they will be triggered in the following order:

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

This behavior allows you to handle immediate changes with the input event and perform actions when the element loses focus with the change event.

Example

The following example demonstrates the difference between input and change events:

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

When typing into a text input or selecting an option in a dropdown, you will see the following output:

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

Notice that input is triggered with each keystroke or character change, while change is only triggered once the focus is lost.

The above is the detailed content of What are the Differences Between \'input\' and \'change\' Events for input Elements?. For more information, please follow other related articles on the PHP Chinese website!