JavaScript HTML DOM イベントリスナー

addEventListener() メソッド

インスタンス

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

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

自分で試してみる

addEventListener() 指定された要素に指定されたイベントハンドラを追加する方法です。

addEventListener() 既存のイベントハンドラをオーバーライドせずに要素にイベントハンドラを追加する方法です。

要素に複数のイベントハンドラを追加することができます。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

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

addEventListener() どんなDOMオブジェクトにもイベントハンドラを追加できますが、HTML要素に限りません。例えば、windowオブジェクトです。

メソッドを使うと、イベントがバブルアップに対してどのように反応するかをより簡単に制御できます。 addEventListener() メソッドを使用する場合、

メソッドを使用する場合、JavaScriptとHTMLタグは分離され、読みやすさが向上します；HTMLタグを制御しない場合でもイベントリスナーを追加することができます。 removeEventListener() メソッドを使って簡単にイベントリスナーを削除できます。

文法

element.addEventListener(event, function, useCapture);

第1引数はイベントのタイプ（例えば「click」または「mousedown」）です。

第2引数はイベントが発生したときに呼び出す必要がある関数です。

第3引数はボルン値で、イベントのバブルアップまたはキャプチャを使用するかどうかを指定します。この引数はオプションです。

注意：イベントに「on」接頭辞を使用しないでください；代わりに「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要素、HTMLオブジェクト、windowオブジェクトなど、xmlHttpRequestオブジェクトなど、イベントをサポートする他のオブジェクト）にイベントリスナーを追加することができます。

インスタンス

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

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

自分で試してみる

パラメータの渡し方

パラメータ値を渡す場合、指定された関数を呼び出す「匿名関数」をパラメータ形式で使用してください：

インスタンス

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

自分で試してみる

イベントバブルまたはイベントキャプチャ？

HTML DOMには、バブルとキャプチャの2種類のイベント伝播方法があります：

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

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

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

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

addEventListener(event, function, useCapture);

デフォルト値は falseの場合、プルーフ伝播が使用されます。 trueの場合、イベントはキャプチャ伝播を使用します。

インスタンス

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

自分で試してみる

removeEventListener() メソッド

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、Opera 6.0 およびそれ以前のバージョンではサポートされていません addEventListener() および removeEventListener() 方法。ただし、これらの特別なブラウザバージョンに対しては、使用できます attachEvent() メソッドは、要素にイベントハンドラを追加し、 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 イベント オブジェクト リファレンス マニュアル。