JavaScript入門 | イベント | イベントリスナーの登録

Tags:

イベントリスナー

イベントリスナーとは、イベントが発生したときにその処理を担当する関数を指し、イベントハンドラーとも呼ばれる。 指定されたタイプのイベントが特定の要素で発生すると、Webブラウザはその要素に登録されたイベントリスナーを実行する。

イベントリスナーの登録

作成したイベントリスナーは、まず対象のオブジェクトや要素に登録されていなければ呼び出せない。 オブジェクトや要素にイベントリスナーを登録する方法は次のとおりである。

  1. イベントの対象となるオブジェクトや要素にプロパティとして登録する方法
  2. オブジェクトや要素のメソッドにイベントリスナーを渡す方法

オブジェクトや要素にプロパティとして登録する方法

オブジェクトや要素にプロパティとしてイベントリスナーを登録するときは、次の方法を使用できる。

  1. JavaScriptコードでプロパティとして登録する
  2. HTMLタグに属性として登録する

JavaScriptコードでプロパティとして登録する方法は、ほぼすべてのブラウザがほとんどのイベントタイプでサポートしている。 この方法の欠点は、イベントタイプごとに1つのイベントリスナーしか登録できない点である。

window.onload = function() {                    // この関数はHTML文書が読み込まれたときに実行される。
    var text = document.getElementById("text"); // IDが"text"の要素を選択する。
    text.innerHTML = "HTML文書が読み込まれました。";
}

また、次のようにHTMLタグに属性としてイベントリスナーを登録することもできる。 この方法の欠点は、HTMLコードにJavaScriptコードが追加されるため可読性が低下し、保守も難しくなる点である。

<p onclick="alert('文字列をクリックしました！')">この文字列をクリックしてみてください！</p>

オブジェクトや要素のメソッドにイベントリスナーを渡す方法

オブジェクトや要素のメソッドにイベントリスナーを渡すときは、次のメソッドを使用できる。

  1. addEventListener()
  2. attachEvent()

addEventListener()メソッドは、ほぼすべてのブラウザでサポートされているイベントリスナー登録用のメソッドである。

このメソッドの構文は次のとおりである。

構文

対象オブジェクト.addEventListener(イベント名, 実行するイベントリスナー, イベント伝播方式)
  1. イベント名: イベントリスナーを登録するイベントタイプを文字列で渡す。
  2. 実行するイベントリスナー: 指定されたイベントが発生したときに実行するイベントリスナーを渡す。
  3. イベント伝播方式: falseならバブリング方式で、trueならキャプチャリング方式でイベントを伝播する。
var showBtn = document.getElementById("btn"); // IDが"btn"の要素を選択する。
showBtn.addEventListener("click", showText);  // 選択した要素にclickイベントリスナーを登録する。
function showText() {
    document.getElementById("text").innerHTML = "じゃーん！テキストが表示されました！";
}

イベントリスナーをプロパティとして登録するときは"on"が付いたイベントタイプを使用するが、addEventListener()メソッドでは"on"が付かないイベントタイプを使用しなければならない。

addEventListener()メソッドはInternet Explorer 8以前、Opera 6以前ではサポートされていないため、代わりに似た動作をするattachEvent()メソッドとdetachEvent()メソッドを使用する必要がある。

複数のイベントリスナーの登録

addEventListener()メソッドを使用すると、1つのオブジェクトに複数のイベントリスナーを登録できる。

var btn = document.getElementById("btn");        // IDが"btn"の要素を選択する。
btn.addEventListener("click", clickBtn);         // 選択した要素にclickイベントリスナーを登録する。
btn.addEventListener("mouseover", mouseoverBtn); // 選択した要素にmouseoverイベントリスナーを登録する。
btn.addEventListener("mouseout", mouseoutBtn);   // 選択した要素にmouseoutイベントリスナーを登録する。
function clickBtn() {
    document.getElementById("text").innerHTML = "ボタンがクリックされました！";
}
function mouseoverBtn() {
    document.getElementById("text").innerHTML = "マウスがボタンの上にあります！";
}
function mouseoutBtn() {
    document.getElementById("text").innerHTML = "マウスがボタンの外に出ました！";
}

イベントリスナーの削除

removeEventListener()メソッドを使用すると、登録されたイベントリスナーを簡単に削除できる。

function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "イベントリスナーが削除されました！";
}