4. イベント処理

この章の目的

JavaScriptでユーザーの操作（クリックや入力など）に反応する方法を学びます。

イベントリスナーの登録

addEventListener を使ってイベントを設定します。

const button = document.querySelector("#add-button");
button.addEventListener("click", () => {
  alert("ボタンがクリックされました");
});

イベントの種類

• click（クリック）
• input（文字入力）
• submit（フォーム送信）
• change（値の変更）

ToDoアプリでの実践例

タスク追加ボタンに click イベントを設定しています。

addButton.addEventListener("click", () => {
  const text = taskInput.value.trim();
  if (text !== "") {
    addTask(text);
    taskInput.value = "";
  }
});

チェックボックスにもイベントが設定されています。

checkbox.addEventListener("change", () => {
  task.done = checkbox.checked;
  updateProgress(groupName);
  saveTasks();
});