例
クリックイベントを添付し<button>要素。 ユーザーはボタン、出力をクリックすると"Hello World"中に<p>のid =「デモ」を持つ要素：
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
addEventListener()メソッドは、指定された要素にイベントハンドラを取り付けます。
ヒント：使用removeEventListener()で添付されたイベントハンドラ削除する方法をaddEventListener()メソッドを。
ヒント：使用した文書を。 addEventListener()メソッドは、ドキュメントにイベントハンドラをアタッチします。
ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョン、およびオペラ6.0およびそれ以前のバージョンではサポートされていません。 しかし、これらの特定のブラウザのバージョンのためには、使用することができますattachEvent()イベントハンドラをアタッチする方法を(see "More Examples" below for a cross-browser solution) 。
構文
element .addEventListener( event , function ,
useCapture )
パラメータ値
| パラメーター | 説明 |
|---|---|
| event | 必須。 イベントの名前を指定する文字列。 注：使用しないでください"on"接頭辞を。 例えば、使用"click"の代わりに"onclick" 。 すべてのHTML DOMイベントのリストについては、当社の完全なを見てHTML DOMイベントオブジェクトのリファレンス 。 |
| function | 必須。 イベントが発生したときに実行する関数を指定します。 イベントが発生すると、イベントオブジェクトは、最初のパラメータとして関数に渡されます。 イベントオブジェクトの型が指定されたイベントに依存します。 たとえば、 "click"イベントはMouseEventオブジェクトに属します。 |
| useCapture | 任意。 イベントがキャプチャまたはバブリング段階で実行されるべきかどうかを指定するブール値。 可能な値：
|
技術的な詳細
| DOMバージョン： | DOMレベル2のイベント |
|---|---|
| 戻り値： | 戻り値なし |
| 変更履歴： | useCaptureパラメータは、Firefox 6とOpera 11.60にオプションとなりました(has always been optional for Chrome, IE and Safari) |
その他の例
例
また、外部を参照することができます"named"機能。
この例では、ユーザーがクリックしたときに関数を実行する方法を示し<button>要素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
»それを自分で試してみてください 例
既存のイベントを上書きすることなく、同じ要素に多くのイベントを追加することができます。
この例では、同じ上の2つのクリックイベントを追加する方法を示し<button>要素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); »それを自分で試してみてください 例
あなたは、同じ要素に異なる種類のイベントを追加することができます。
この例では、同じに多くのイベントを追加する方法を示し<button>要素：
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); »それを自分で試してみてください 例
パラメータ値を渡すときは、使用"anonymous function"のパラメータで指定された関数を呼び出します。
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); »それを自分で試してみてください 例
背景色に変更し<button>要素を：
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); »それを自分で試してみてください 例
バブリングとキャプチャとの違いを示すために、オプションのuseCaptureパラメータを使用します：
document.getElementById("myDiv").addEventListener("click", myFunction,
true); »それを自分で試してみてください 例
使用removeEventListener()が取り付けられているイベントハンドラ除去する方法addEventListener()メソッドを：
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); »それを自分で試してみてください 例
サポートしていないブラウザの場合addEventListener()メソッドを、あなたが使用することができますattachEvent()メソッドを。
この例では、クロスブラウザのソリューションを示しています。
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);
} »それを自分で試してみてください 関連ページ
JavaScriptのチュートリアル： HTML DOMのEventListener
HTML DOMリファレンス： ドキュメント。 addEventListener()