例
文書へのクリックイベントを接続します。 ユーザーは、ドキュメント、出力内のどこかをクリックすると"Hello World"中に<p>のid =「デモ」を持つ要素：
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
document. addEventListener() document. 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) 。
構文
document.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"機能：
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
»それを自分で試してみてください 例
あなたは、既存のイベントを上書きせずに、文書に多くのイベントを追加することができます。
この例では、ドキュメントへの2つのクリックイベントを追加する方法を示しています。
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); »それを自分で試してみてください 例
あなたは、ドキュメントにさまざまな種類のイベントを追加することができます。
この例では、文書に多くのイベントを追加する方法を示しています。
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); »それを自分で試してみてください 例
パラメータ値を渡すときは、使用"anonymous function"のパラメータで指定された関数を呼び出します。
document.addEventListener("click", function() {
myFunction(p1, p2);
}); »それを自分で試してみてください 例
ドキュメントのの背景色に変更し<body>要素を：
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); »それを自分で試してみてください 例
使用removeEventListener()が取り付けられているイベントハンドラ除去する方法addEventListener()メソッドを：
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); »それを自分で試してみてください 例
サポートしていないブラウザの場合addEventListener()メソッドを、あなたが使用することができますattachEvent()メソッドを。
この例では、クロスブラウザのソリューションを示しています。
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} »それを自分で試してみてください 関連ページ
JavaScriptのチュートリアル： HTML DOMのEventListener
HTML DOMリファレンス： 要素 。 addEventListener()