What's the difference between input and change events?

input fires on every keystroke/modification, while change fires only once the field loses focus (immediately for checkboxes and selects).

Example:

const field = document.querySelector("input");

field.addEventListener("input", () => {
    // Every keystroke
    console.log("Input:", field.value);
});

field.addEventListener("change", () => {
    // When focus leaves
    console.log("Change:", field.value);
});

Typing "hello" then clicking elsewhere:

Input: h
Input: he
Input: hel
Input: hell
Input: hello
// Only once, at the end
Change: hello

Note: For checkboxes and select elements, change fires immediately on selection.