JavaScript HTML DOM EventListener

❮ 前章へ 次章へ ❯

addEventListener() メソッド

例

ユーザがボタンをクリックしたときに発火するイベントリスナを追加します：

document.getElementById("myBtn").addEventListener("click", displayDate);
Try it Yourself »

addEventListener() メソッドは、指定の要素にイベントハンドラをアタッチします。

addEventListener() メソッドは、既存のイベントハンドラを上書きすることなく、イベントハンドラを要素にアタッチします。

1つの要素に多くのイベントハンドラを追加できます。

1つの要素に同じタイプのイベントハンドラ（2つの「クリック」イベントなど）を多数追加できます。

HTMLオブジェクトだけでなく、DOMオブジェクトにもイベントリスナを追加できます。

addEventListener() メソッドを使用すると、イベントがバブリングにどのように反応するかを簡単に制御できます。

addEventListener()メソッドを使用すると、JavaScriptは読みやすくするためにHTMLマークアップから分離され、 HTMLマークアップを制御しなくてもイベントリスナを追加できます。

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

構文

element.addEventListener(event, function, useCapture);

最初のパラメータは、イベントのタイプ（"click" や "mousedown"など）です。

2番目のパラメータは、イベントが発生したときに呼び出す関数です。

3番目のパラメータは、イベントのバブリングまたはキャプチャリングを使用するかどうかを指定するブール値です。 このパラメータはオプションです。

イベントに接頭辞 "on" を使用しないことに注意してください。"onclick"ではなく"click"を使用します。

要素へのイベントハンドラの追加

例

ユーザが要素をクリックしたときに "Hello World!" をアラートします：

element.addEventListener("click", function(){ alert("Hello World!"); });
Try it Yourself »

外部の「名前付き」関数を参照することもできます：

例

ーザが要素をクリックしたときに "Hello World!" をアラートします：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
Try it Yourself »

同じ要素に多くのイベントハンドラを追加する

addEventListener() メソッドは、既存のイベントを上書きすることなく、同じ要素に多くのイベントを追加することを可能にします。

例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Try it Yourself »

同じ要素にいろいろなタイプのイベントを追加することができます：

例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Try it Yourself »

Window オブジェクトにイベントハンドラを追加する

addEventListener() メソッドを使用すると、HTML要素、HTML文書、window オブジェクト、またはイベントをサポートする他のオブジェクト （xmlHttpRequestオブジェクトなど）のHTML DOMオブジェクトにイベントリスナを追加できるようになります。

例

ユーザがウィンドウのサイズを変更したときに発火するイベントリスナを追加します：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
Try it Yourself »

パラメータの受け渡し

パラメータの値を渡すときは、パラメータで指定した関数を呼び出すために「無名関数」を使用します：

例

element.addEventListener("click", function(){ myFunction(p1, p2); });
Try it Yourself »

イベントバブリングかイベントキャプチャリングか？

HTML DOM のイベントの伝播方法には、バブリングとキャプチャリングの2つがあります。

イベントの伝播は、イベントが発生したときに要素の順序を定義する方法です。 <div>要素内に<p>要素があり、ユーザが<p>要素をクリックした場合、最初にどの要素の「クリック」イベントを処理すべきでしょうか？

バブリングでは、最も内側の要素のイベントが最初に処理され、次に外側が処理されます： <p>要素のクリックイベントが最初に処理され、次に<div>要素のクリックイベントが処理されます。

キャプチャリングでは、最も外側の要素のイベントが最初に処理され、次に内側が処理されます： <div>要素のクリックイベントが最初に処理され、次に<p>要素のクリックイベントが処理されます。

addEventListener() メソッドを使用すると、 "useCapture"パラメータを使用してイベントの伝播を指定できます：

addEventListener(event, function, useCapture);

デフォルト値はfalseで、バブリングを使用します。値がtrueの場合はキャプチャリングを使用します。

訳注：バブリングとキャプチャリングについては W3Cの説明と図が分かり易いでしょう

例

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Try it Yourself »

removeEventListener() メソッド

removeEventListener() メソッドは、addEventListener() メソッドでアタッチされたイベントハンドラを削除します：

例

element.removeEventListener("mousemove", myFunction);
Try it Yourself »

ブラウザ・サポート

表中の番号は、このメソッドを完全にサポートした最初のブラウザーのバージョンを示しています。

メソッド
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注: addEventListener() と removeEventListener() メソッドは、 IE 8 以前のバージョンおよび Opera 6.0 以前のバージョンはサポートしていません。 しかし、この指定したブラウザのバージョンでは、attachEvent() メソッドを使用してイベントハンドラを要素にアタッチし、 detachEvent() メソッドを使用して削除できます：

element.attachEvent(event, function);
element.detachEvent(event, function);

例

ブラウザ間の解決策：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}
Try it Yourself »
HTML DOMを参照してください。

HTML DOM イベント・オブジェクト・リファレンス

すべてのHTML DOMイベントのリストについては、完全な HTML イベント・オブジェクト・リファレンスをご覧ください。


❮ 前章へ 次章へ ❯