JavaScriptのイベント change, keyup, input について

入力するフォームのバリデーションを実装する際に、バリデーションの検証をするタイミングには大きく分けて下記の3つがあると思っている。

1. change
2. keyup
3. input

JavaScript コード例

const input = document.querySelector('#name');
const button = document.querySelector('#button');
const validate = () => {
    // 検証の結果として正しい場合はtrue, 正しくない場合はfalseを返す。
}

// 1. change
input.addEventListener('change', () => {
    button.disabled = ! validate();
});


// 2. keyup
input.addEventListener('keyup', () => {
    button.disabled = ! validate();
});


// 3. input
input.addEventListener('input', () => {
    button.disabled = ! validate();
});

1. 結論

1-1. change

inputのvalueが変更されて、inputのフォーカスが外れたタイミングで発火する。

1-2. keyup

inputに入力されて、キーを離したタイミングで発火する。
ただし、スマートフォンでコピペした後にスマートフォンの完了ボタンを押さないと発火しない。フォーカスが外れても発火しない。

1-3. input

inputに入力したタイミングで発火する。