addEventListener()は、JavaScriptでイベントを扱う際の基本的なメソッドです。このメソッドを使用することで、要素に対して様々なイベントを設定できます。今回は、このメソッドの基本的な使い方と、よくあるエラーの解決方法について解説します。

addEventListener()の基本的な使い方

要素.addEventListener('イベント名', 実行する関数);

例えば、ボタンがクリックされたときにアラートを表示する場合は以下のように記述します：

const button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

よくあるエラーと解決方法

1. 要素が見つからないエラー

// エラーの例
Uncaught TypeError: Cannot read property 'addEventListener' of null

このエラーは、対象の要素が見つからない場合に発生します。

解決方法：

  • DOMの読み込み完了を待つ
  • 要素のセレクタが正しいか確認する
// DOMの読み込み完了を待つ
document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('button');
    button.addEventListener('click', handleClick);
});

2. イベント名の指定ミス

// 誤った例
button.addEventListener('onClick', handleClick); // エラー

// 正しい例
button.addEventListener('click', handleClick); // OK

イベント名は'on'をつけずに指定します。

3. 関数の実行と参照の違い

// 誤った例（即時実行されてしまう）
button.addEventListener('click', handleClick());

// 正しい例（関数の参照を渡す）
button.addEventListener('click', handleClick);

よく使用されるイベントの種類

  • click: クリック時
  • mouseover: マウスが要素上に乗った時
  • mouseout: マウスが要素から離れた時
  • keydown: キーボードのキーを押した時
  • submit: フォームが送信された時
  • load: 読み込みが完了した時

イベントリスナーの削除

要素.removeEventListener('イベント名', 関数名);

イベントリスナーを削除する場合は、関数を変数に保存しておく必要があります：

const handleClick = () => {
    console.log('クリックされました');
};

button.addEventListener('click', handleClick);
// 後で削除する場合
button.removeEventListener('click', handleClick);

イベントオブジェクトの活用

イベントの詳細情報を取得したい場合は、コールバック関数の引数としてイベントオブジェクトを受け取ります：

button.addEventListener('click', function(event) {
    // クリックされた座標を取得
    console.log(event.clientX, event.clientY);
    
    // デフォルトの動作を防ぐ
    event.preventDefault();
});

以上が、addEventListener()の基本的な使い方とエラー解決方法です。イベントリスナーを適切に使用することで、インタラクティブなWebアプリケーションを作成することができます。