JavaScript HTML DOM EventListener

addEventListener() メソッド

例

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

document.getElementById("myBtn").addEventListener("click", displayDate);

試してみる »

addEventListener() メソッドは、指定した要素にイベントハンドラーを追加するために使用されます。

addEventListener() メソッドで追加したイベントハンドラーは、既存のイベントハンドラーを上書きしません。

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

同じ要素に同じタイプの複数のイベントハンドラーを追加できます。例：「click」イベントを2つ。

任意の DOM オブジェクトにイベントリスナーを追加できます。HTML 要素だけでなく、window オブジェクトなどにも追加できます。

addEventListener() メソッドを使用すると、イベント（バブリングとキャプチャ）をより簡単に制御できます。

addEventListener() メソッドを使用すると、JavaScript が HTML マークアップから分離され、可読性が高まり、HTML マークアップを制御せずにイベントリスナーを追加することもできます。

removeEventListener() メソッドを使用して、イベントリスナーを削除できます。

構文

element.addEventListener(event, function, useCapture);

最初のパラメータはイベントのタイプです（例：「click」または「mousedown」）。

2番目のパラメータは、イベントがトリガーされた後に呼び出される関数です。

3番目のパラメータは、イベントがバブリングかキャプチャかを示すブール値です。このパラメータは省略可能です。

Note 注意：「on」プレフィックスを使用しないでください。たとえば、「onclick」ではなく「click」を使用します。

元の要素にイベントハンドラーを追加する

例

ユーザーが要素をクリックすると「Hello World!」と表示されます：

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

試してみる »

関数名を使用して外部関数を参照できます：

例

ユーザーが要素をクリックすると「Hello World!」と表示されます：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

試してみる »

同じ要素に複数のイベントハンドラーを追加する

addEventListener() メソッドを使用すると、同じ要素に複数のイベントを追加でき、既存のイベントを上書きしません：

例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

試してみる »

同じ要素に異なるタイプのイベントを追加できます：

例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

試してみる »

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

addEventListener() メソッドを使用すると、HTML DOM オブジェクトにイベントリスナーを追加できます。HTML DOM オブジェクトには、HTML 要素、HTML ドキュメント、window オブジェクトなどがあります。また、xmlHttpRequest オブジェクトなど、他のサポートされているイベントオブジェクトにも追加できます。

例

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

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

試してみる »

パラメータを渡す

パラメータ値を渡す場合は、「無名関数」を使用してパラメータ付きの関数を呼び出します：

例

element.addEventListener("click", function(){ myFunction(p1, p2); });

試してみる »

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

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

イベントの伝播は、要素イベントがトリガーされる順序を定義します。<p> 要素を <div> 要素に挿入し、ユーザーが <p> 要素をクリックした場合、どの要素の「click」イベントが最初にトリガーされるでしょうか？

にバブリングでは、内部要素のイベントが最初にトリガーされ、次に外部要素のイベントがトリガーされます。つまり、<p> 要素のクリックイベントが最初にトリガーされ、次に <div> 要素のクリックイベントがトリガーされます。

にキャプチャでは、外部要素のイベントが最初にトリガーされ、次に内部要素のイベントがトリガーされます。つまり、<div> 要素のクリックイベントが最初にトリガーされ、次に <p> 要素のクリックイベントがトリガーされます。

addEventListener() メソッドは、「useCapture」パラメータを指定して伝播タイプを設定できます：

addEventListener(event, function, useCapture);

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

例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

試してみる »

removeEventListener() メソッド

removeEventListener() メソッドは、addEventListener() メソッドによって追加されたイベントハンドラーを削除します：

例

element.removeEventListener("mousemove", myFunction);

試してみる »

ブラウザサポート

表内の数字は、そのメソッドをサポートする最初のブラウザのバージョン番号を示します。

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

注意：IE 8 およびそれ以前の IE バージョン、Opera 7.0 およびそれ以前のバージョンは、addEventListener() および removeEventListener() メソッドをサポートしていません。ただし、このようなブラウザバージョンでは、detachEvent() メソッドを使用してイベントハンドラーを削除できます：

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

例

クロスブラウザ対応の解決方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) { // すべての主要ブラウザ、IE 8 およびそれ以前のバージョンを除く
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 およびそれ以前のバージョン
    x.attachEvent("onclick", myFunction);
}

試してみる »

HTML DOM イベントオブジェクトリファレンスマニュアル

すべての HTML DOM イベントについては、当サイトの完全なHTML DOM Event オブジェクトリファレンスマニュアル。 その他の拡張