JavaScript：イベント処理

クリック後 #output が クリックされました

btn.addEventListener("click", () => { ... }) の形。中で output.textContent に代入する。

const btn = document.querySelector("#btn");
const output = document.querySelector("#output");

btn.addEventListener("click", () => {
  output.textContent = "クリックされました";
});

「いつ」「何をするか」を登録しておくのがイベント処理。登録した時点では何も起きず、実際に押されたときに初めて中身が動く。

解答 == B

カッコを付けると関数はどうなるか。

B

カッコを付けると即実行される。登録したいのは関数そのものなので handleClick とカッコなしで渡す。初学者が最もつまずく点。

入力後 #output に入力値が反映

ハンドラは (e) => { ... } の形で受け取り、e.target.value で入力値が取れる。

const input = document.querySelector("#name");
const output = document.querySelector("#output");

input.addEventListener("input", (e) => {
  output.textContent = e.target.value;
});

input イベントは1文字打つたびに発火する。リアルタイム検索や文字数カウントはこれで作れる。

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

btn.____("click", () => {
  console.log("押された");
});

クリック後 出力 == 押された

「イベントリスナーを追加する」という意味のメソッド。

addEventListener

同じ要素に何個でも登録できるのがこの方式の利点。onclick = で代入する古い書き方だと、後から書いたもので上書きされてしまう。

解答 == B

イベントの「対象」を表す英単語。

B

e.target は実際にクリックされた要素、e.currentTarget はリスナーを登録した要素。イベント委譲ではこの違いが決定的に重要になる。

3回クリック後 #count が 3

let count = 0 をリスナーの外に用意し、ハンドラの中で count++ して表示を更新する。

const btn = document.querySelector("#btn");
const display = document.querySelector("#count");

let count = 0;

btn.addEventListener("click", () => {
  count++;
  display.textContent = count;
});

状態を持つ変数はリスナーの外に置く。中で宣言すると毎回0にリセットされてしまう。この「外の変数を書き換える」形がアプリの基本構造になる。

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

form.addEventListener("submit", (e) => {
  e.____();
  console.log("送信を止めました");
});

submit後 出力 == 送信を止めました

「既定の動作を防ぐ」という意味のメソッド。

preventDefault

フォームは何もしないとページを再読み込みする。JavaScriptで処理したいときは必ずこれで止める。リンクの遷移を止めるときにも使う。

解答 == B

イベントは親へ伝わっていく性質がある。

B

これをイベント委譲と呼ぶ。登録が1つで済むうえ、後から追加されたボタンにも自動で反応する。一覧を動的に作るアプリでは必須の技法。

li クリック後 その要素に selected が付く

e.target.classList.contains("item") で判定してから add する。

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

list.addEventListener("click", (e) => {
  if (e.target.classList.contains("item")) {
    e.target.classList.add("selected");
  }
});

親で受けて子を判定するのがイベント委譲の形。e.target は実際に押された子要素を指すので、これで個別に処理できる。

クリック後 #output が 10

input.value は文字列なので Number() で変換する。変換しないと "55" になる。

const btn = document.querySelector("#btn");
const num = document.querySelector("#num");
const output = document.querySelector("#output");

btn.addEventListener("click", () => {
  output.textContent = Number(num.value) * 2;
});

input.value は必ず文字列。JS02で学んだとおり、変換を忘れると "5" * 2 は10になるが "5" + 2 は "52" になる。計算前の Number() は習慣にする。

入力後 #counter が 5 / 100文字

e.target.value.length で文字数が取れる。classList.toggle("over", 条件) と書くと条件に応じて付け外しできる。

const text = document.querySelector("#text");
const counter = document.querySelector("#counter");
const LIMIT = 100;

text.addEventListener("input", (e) => {
  const length = e.target.value.length;
  counter.textContent = `${length} / ${LIMIT}文字`;
  counter.classList.toggle("over", length > LIMIT);
});

classList.toggle(名前, 条件) は第2引数で付け外しを制御できる。if で add / remove を書き分けるより1行で済む。

1回目で hidden が外れ文字が 閉じる、2回目で戻る

classList.toggle は付け外しした結果を true / false で返す。その戻り値でボタンの文字を決められる。

const toggleBtn = document.querySelector("#toggleBtn");
const panel = document.querySelector("#panel");

toggleBtn.addEventListener("click", () => {
  const isHidden = panel.classList.toggle("hidden");
  toggleBtn.textContent = isHidden ? "開く" : "閉じる";
});

toggle の戻り値は「付けたら true、外したら false」。これを使うと状態を別の変数で管理する必要がなくなり、ズレる心配もなくなる。

submit後 #msg が メール形式が不正です で error クラスあり

e.preventDefault() を最初に書く。判定は value.includes("@")。

const form = document.querySelector("#form");
const email = document.querySelector("#email");
const msg = document.querySelector("#msg");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const isValid = email.value.includes("@");

  msg.textContent = isValid ? "送信しました" : "メール形式が不正です";
  msg.classList.toggle("error", !isValid);
});

preventDefault を忘れるとページが再読み込みされ、表示した内容が一瞬で消える。フォームを扱うときは最初に書く癖をつける。

削除ボタンクリック後 li が2つ、出力 == 残り2件

list に1つだけリスナーを登録し、e.target が del クラスなら e.target.parentNode.remove() する。件数は list.children.length。

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

list.addEventListener("click", (e) => {
  if (!e.target.classList.contains("del")) {
    return;
  }

  e.target.parentNode.remove();
  console.log(`残り${list.children.length}件`);
});

個々の削除ボタンにリスナーを付けていないのが要点。だから後から項目を追加しても、そのボタンは何もしなくても動く。冒頭の return で早期に抜ける書き方（JS08）も効いている。

クリック後 li が1つ追加され input が空、出力 == 1件追加（合計1件）

trim() で前後の空白を除いてから空判定する。追加後に input.value = "" で空にする。

const input = document.querySelector("#input");
const addBtn = document.querySelector("#addBtn");
const list = document.querySelector("#list");

addBtn.addEventListener("click", () => {
  const text = input.value.trim();

  if (!text) {
    return;
  }

  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);

  input.value = "";

  console.log(`1件追加（合計${list.children.length}件）`);
});

入力 → 検証 → 追加 → 入力欄をクリアという流れは、あらゆる入力フォームの基本形。trim() を挟まないと空白だけの項目が追加されてしまう。