inputイベントとchangeイベントの違い

<input type="text" id="textInput" />
<input type="text" id="textChange" />

const textInput = document.getElementById("textInput");
const textChange = document.getElementById("textChange");

textInput.addEventListener("input", (e) => {
  console.log("INPUT:" + e.target.value);
});

textChange.addEventListener("change", (e) => {
  console.log("CHANGE:" + e.target.value);
});

inputイベントはキー入力と同時にイベントが発生する。
例：abcと入力すると３回イベントが発生して、コンソールに”a”,”ab”,”abc”と表示される。
changeイベントはEnterキーを押したときやフォーカスが外れたときにイベントが発生する