先生と生徒の会話形式で理解しよう

生徒

「イベント処理を書いたのに、ボタンをクリックしても動かないことがあります。どうしてでしょうか？」

先生

「その場合、よくある原因はいくつかあります。イベント対象の取得ミス、関数の呼び出し方、タイミングの問題などです。」

生徒

「具体的にはどのように確認すればいいですか？」

先生

「順番に確認方法と対処法を見ていきましょう。これを知っておくと、イベント処理のエラーを自分で直せるようになります。」

1. DOM要素が取得できない

イベント処理で最も多いエラーの1つは、document.getElementByIdやquerySelectorで要素が取得できないことです。主な原因は、HTMLの要素がまだ読み込まれていないタイミングでJavaScriptが実行されていることです。


const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("クリックされました");
});

このコードでボタンが取得できない場合、DOMContentLoadedイベント内で実行すると解決します。


document.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    console.log("クリックされました");
  });
});

2. 関数の呼び出し方のミス

イベントリスナーに関数を渡すときに、括弧を付けて呼び出してしまうと、イベント発火時ではなく登録時に関数が実行されてしまいます。


// 間違い
button.addEventListener("click", sayHello());

// 正しい
button.addEventListener("click", sayHello);

function sayHello() {
  console.log("こんにちは！");
}

関数名だけを渡すことで、クリックされたときに初めて関数が呼び出されます。

3. イベントが重複して発生する

同じ要素に複数回イベントを登録すると、意図しない回数で処理が実行されることがあります。特に動的に要素を生成する場合は注意が必要です。


button.addEventListener("click", () => console.log("クリック1回目"));
button.addEventListener("click", () => console.log("クリック2回目"));

必要に応じてremoveEventListenerで既存のリスナーを削除するか、イベント委譲を使うと効率的です。

4. イベントオブジェクトの使い方の誤り

イベントハンドラー内でeventオブジェクトを使う場合、引数を正しく受け取らないとエラーになります。


// 間違い
button.addEventListener("click", () => {
  console.log(event.target);
});

// 正しい
button.addEventListener("click", (event) => {
  console.log(event.target);
});

必ずイベントオブジェクトを引数で受け取りましょう。

5. タイミングの問題

非同期処理や遅延読み込みの影響で、イベント処理が想定通りに動かないことがあります。この場合、イベント登録タイミングを調整するか、非同期処理の完了後にイベントを設定します。


async function loadData() {
  await fetchData();
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => console.log("データ読み込み後にクリック"));
}
loadData();