JavaScriptのイベントリスナーとは？イベント処理の基本を解説

JavaScriptでユーザーの操作に反応する処理を書くときに使うのが「イベントリスナー」です。
イベントリスナーを使うことで、クリックや入力などのイベントが発生したときに、指定した関数（処理）を実行させることができます。

この記事では、イベントリスナーの基本的な使い方から、よくあるパターンまでをわかりやすく解説します。

イベントリスナーとは？

イベントリスナーとは、「特定のイベントが発生したときに実行される関数（リスナー関数）」を登録する仕組みです。

主に addEventListener メソッドを使って要素にイベントリスナーを設定します。

基本構文

要素.addEventListener("イベント名", 関数);

たとえば、ボタンがクリックされたときに処理を実行したい場合は以下のように書きます。

例：

document.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました");
});

HTML側のボタン

<button id="myButton">クリック</button>

イベントリスナーの登録方法（関数を分ける）

関数を事前に定義しておけば、コードを分かりやすく管理できます。

function handleClick() {
  alert("クリックされました");
}

const btn = document.getElementById("myButton");
btn.addEventListener("click", handleClick);

イベントリスナーの解除

removeEventListener を使うと、登録したイベントリスナーを解除できます。

btn.removeEventListener("click", handleClick);

注意点として、無名関数では解除できません。解除するには、関数を変数や名前付きで保持しておく必要があります。

イベントオブジェクトを受け取る

イベントリスナーには、イベントの詳細を示す「イベントオブジェクト」が自動的に渡されます。

btn.addEventListener("click", function(event) {
  console.log("クリックされた要素：", event.target);
});

event オブジェクトを使うことで、クリック位置やキー入力の内容など、さまざまな情報が取得できます。

よく使うイベント名

• click：クリックされたとき
• dblclick：ダブルクリックされたとき
• keydown：キーが押されたとき
• input：入力欄の内容が変化したとき
• submit：フォームが送信されたとき
• mouseover：マウスが乗ったとき
• mouseleave：マウスが離れたとき

まとめ

• イベントリスナーは、特定のイベントに反応して関数を実行する仕組み
• addEventListener でイベントを登録する
• removeEventListener で解除も可能（関数を変数で保持）
• イベントオブジェクトから詳細な情報が取得できる

イベントリスナーは、インタラクティブなWebサイトを作る上での基本です。
まずは簡単なボタンのクリックから試して、徐々に応用にチャレンジしてみましょう。