JavaScript

JavaScriptのイベントリスナーについて解説

JavaScriptのイベントリスナーについて詳しく解説します。

イベントリスナーとは？

イベントリスナーは、ユーザーの操作（クリック、キー入力、マウス移動など）やブラウザの動作（読み込み完了、リサイズなど）に応じて実行される関数を登録するための仕組みです。イベントリスナーを使うことで、インタラクティブなウェブページを作成することができます。

イベントリスナーの追加方法

イベントリスナーを追加するには、主に以下の方法があります：

  1. addEventListenerメソッドを使用する方法
  2. HTMLのイベント属性を使用する方法
  3. イベントハンドラープロパティを使用する方法

1. addEventListenerメソッドを使用する方法

addEventListenerメソッドは、最も推奨される方法です。複数のイベントリスナーを同じ要素に追加できるという利点があります。

基本的な構文
element.addEventListener(event, function, useCapture);
  • element: イベントをリッスンする要素。
  • event: イベントのタイプ（例: 'click', 'mouseover', 'keydown'）。
  • function: イベントが発生したときに実行される関数。
  • useCapture: オプションのブール値。イベントキャプチャのフェーズでイベントをリッスンするかどうかを指定します（デフォルトはfalse）。
例
// ボタン要素を取得
const button = document.getElementById("myButton");

// クリックイベントリスナーを追加
button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

2. HTMLのイベント属性を使用する方法

HTML内でイベント属性を直接使用してイベントリスナーを設定する方法です。シンプルですが、コードがHTMLと混在するため推奨されません。

例
<button id="myButton" onclick="handleClick()">クリック</button>

<script>
function handleClick() {
    alert("ボタンがクリックされました！");
}
</script>

3. イベントハンドラープロパティを使用する方法

JavaScriptで要素のイベントハンドラープロパティに関数を代入する方法です。この方法では、同じイベントに対して1つのリスナーしか設定できません。

例

// ボタン要素を取得
const button = document.getElementById("myButton");

// クリックイベントハンドラーを設定
button.onclick = function() {
    alert("ボタンがクリックされました！");
};

イベントオブジェクト

イベントが発生すると、ブラウザはイベントに関する情報を含むイベントオブジェクトを生成します。イベントオブジェクトは、イベントリスナー関数に自動的に渡されます。

例
// ボタン要素を取得
const button = document.getElementById("myButton");

// クリックイベントリスナーを追加
button.addEventListener("click", function(event) {
    console.log(event); // イベントオブジェクトをコンソールに表示
    alert("ボタンがクリックされました！");
});

イベントオブジェクトには、発生したイベントに関するさまざまなプロパティが含まれます。例えば、クリックイベントの場合、event.clientXとevent.clientYはクリックが発生した位置の座標を示します。

イベントの伝播

イベントは、ターゲット要素から親要素へと伝播します。イベントの伝播には、キャプチャリングフェーズとバブリングフェーズの2つのフェーズがあります。

  • キャプチャリングフェーズ: イベントがドキュメントルートからターゲット要素に向かって伝播する。
  • バブリングフェーズ: イベントがターゲット要素からドキュメントルートに向かって伝播する。
例
// 親要素を取得
const parent = document.getElementById("parentElement");

// 子要素を取得
const child = document.getElementById("childElement");

// 親要素にクリックイベントリスナーを追加
parent.addEventListener("click", function() {
    console.log("親要素がクリックされました！");
}, true); // キャプチャリングフェーズ

// 子要素にクリックイベントリスナーを追加
child.addEventListener("click", function(event) {
    console.log("子要素がクリックされました！");
    event.stopPropagation(); // イベントの伝播を停止
}, false); // バブリングフェーズ

イベントのデフォルト動作の防止

イベントのデフォルト動作（例: リンクのクリックでページが遷移する）を防止するには、event.preventDefault()を使用します。

例
// リンク要素を取得
const link = document.getElementById("myLink");

// クリックイベントリスナーを追加
link.addEventListener("click", function(event) {
    event.preventDefault(); // デフォルト動作を防止
    alert("リンクがクリックされましたが、ページ遷移はしません！");
});

まとめ

  • addEventListenerメソッド: イベントリスナーを追加する最も推奨される方法。
  • HTMLのイベント属性: 簡単にイベントリスナーを設定できるが、推奨されない。
  • イベントハンドラープロパティ: シンプルに設定できるが、複数のリスナーを設定できない。
  • イベントオブジェクト: イベントに関する情報を含むオブジェクト。
  • イベントの伝播: イベントがターゲット要素から親要素へと伝播する。
  • デフォルト動作の防止: event.preventDefault()を使用してデフォルト動作を防止する。

これでJavaScriptのイベントリスナーについての基本的な理解が深まったと思います。

スポンサーリンク

-JavaScript