HTML DOM addEventListener()メソッド
要素オブジェクトインスタンス
<button> 要素にクリックイベントを追加します。 ユーザーがボタンをクリックすると、id="demo" の <p> 要素に "Hello World" を出力します。
document.getElementById("demo").innerHTML = "Hello World";
});
試してみる »
定義と用法
addEventListener() メソッドは、指定した要素にイベントハンドラを追加するために使用します。
ヒント：使用するremoveEventListener()メソッドを使用して、addEventListener() メソッドで追加したイベントハンドラを削除します。
ブラウザサポート
表内の数字は、そのメソッドをサポートする最初のブラウザのバージョン番号を示します。
| メソッド | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意：Internet Explorer 8 およびそれ以前の IE バージョンは addEventListener() メソッドをサポートしておらず、Opera 7.0 および Opera のそれ以前のバージョンもサポートしていません。 ただし、この関数をサポートしないブラウザでは、次を使用できます。attachEvent()メソッドを使用してイベントハンドラを追加できます（「その他のインスタンス」を参照して、クロスブラウザソリューションを確認してください）。
構文
パラメータ値
| パラメータ | 説明 |
|---|---|
| event | 必須。文字列。イベント名を指定します。 注意:"on" プレフィックスを使用しないでください。 たとえば、"onclick" ではなく "click" を使用します。 ヒント：すべての HTML DOM イベントは、当サイトの完全なHTML DOM Event オブジェクトリファレンスマニュアル。 |
| function | 必須。イベントトリガー時に実行する関数を指定します。 イベントオブジェクトは関数の最初のパラメータとして渡されます。 イベントオブジェクトのタイプは特定のイベントによって異なります。たとえば、"click" イベントは MouseEvent（マウスイベント）オブジェクトに属します。 |
| useCapture | オプション。ブール値。イベントをキャプチャフェーズとバブリングフェーズのどちらで実行するかを指定します。 可能な値:
|
技術詳細
| DOM バージョン: | DOM Level 2 Events |
|---|---|
| 戻り値: | 戻り値なし |
| 注記: | Firefox 6 と Opera 11.60 では、useCapture パラメータはオプションです。 （Chrome、IE、Safari では以前からオプションです）。 |
その他のインスタンス
インスタンス
関数名を使用して外部関数を参照できます。
このインスタンスは、ユーザーが <button> 要素をクリックしたときに関数を実行する方法を示しています。
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
試してみる »
インスタンス
ドキュメントに多くのイベントを追加できます。追加したイベントは既存のイベントを上書きしません。
このインスタンスは、<button> 要素に2つのクリックイベントを追加する方法を示しています。
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
試してみる »
インスタンス
同じ要素に異なるタイプのイベントを追加できます。
このインスタンスは、同じ <button> 要素に複数のイベントを追加する方法を示しています。
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);
試してみる »
インスタンス
パラメータ値を渡すときは、「匿名関数」を使用してパラメータ付きの関数を呼び出します。
myFunction(p1, p2);
});
試してみる »
インスタンス
<button> 要素の背景を変更します。
this.style.backgroundColor = "red";
});
試してみる »
インスタンス
オプションパラメータを使用するuseCaptureバブリングとキャプチャの各フェーズの違いを示します。
試してみる »
インスタンス
removeEventListener() メソッドを使用して、addEventListener() メソッドで追加されたイベントハンドラを削除します。
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// <div> イベントハンドラを削除
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
試してみる »
インスタンス
ブラウザが addEventListener() メソッドをサポートしない場合は、attachEvent() メソッドを使用できます。
次のインスタンスは、クロスブラウザの解決策を示しています。
if (x.addEventListener) { // すべての主要ブラウザ、IE 8 およびそれ以前の IE バージョンを除く
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 およびそれ以前の IE バージョン
x.attachEvent("onclick", myFunction);
}
試してみる »
関連ページ
JavaScript チュートリアル:HTML DOM EventListener
JavaScript リファレンスマニュアル:document.addEventListener()
その他の拡張機能