JavaScript Interview Question #69

What is the difference between input and change events?

DOM, Events & Event Loop Fundamentals Mid-Level Intermediate

Quick Interview Answer

The input event generally fires whenever the value of an input-like control changes through user interaction, making it suitable for live validation or search. The change event generally fires when a value is committed, with exact timing depending on the control type.

Detailed Explanation

For a text field, input usually fires on each edit, while change typically fires after the value has changed and the control loses focus or the change is otherwise committed.

Code Example

const search = document.querySelector("#search");

search.addEventListener("input", event => {
    console.log("Live value:", event.target.value);
});

search.addEventListener("change", event => {
    console.log("Committed value:", event.target.value);
});