HTML DOMのaddEventListener（）メソッド

例

文書内のクリックイベントを追加します。ユーザーがドキュメント内の任意の場所をクリックすると、idが= <p>要素の出力の「Hello World」の「デモ」：

document.addEventListener（「クリック」、関数（）{
。のdocument.getElementById（ "デモ"）innerHTMLの=の "Hello World";
}）;

»をお試しください

定義と使用法

document.addEventListener（）メソッドは、ドキュメントにイベントハンドラを追加するために使用されます。

ヒント：あなたが使用することができますdocument.removeEventListener（）イベントハンドラを追加するには、addEventListener（）メソッドを削除する方法を。

ヒント：使用。要素のaddEventListener（）メソッドは、イベントハンドラに要素を指定しました。

ブラウザのサポート

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

ウェイ
addEventListenerを（）	1.0	9.0	1.0	1.0	7.0

注：IEのInternet Explorer 8の以前のバージョンでは、addEventListener（）メソッドをサポートしていません、オペラ7.0およびそれ以前のバージョンは、オペラをサポートしていません。しかし、ブラウザのバージョンのこのタイプは、イベントハンドラを追加するために、attachEvent（）メソッドを使用することができます（クロスブラウザの互換性の問題は、「より多くの例」を表示することができます）。

文法

document.addEventListener（イベント、関数、useCapture）

パラメータ値

パラメータ	説明
イベント	必須。イベントの説明の文字列名。注：「オン」の接頭辞を使用しないでください。たとえば、代わりに "onclickの"の "クリック"を使用します。ヒント：すべてのHTML DOMイベントは、あなたが当社の完全見ることができますHTML DOMイベントオブジェクトの参照を。
関数	必須。これは、イベントがトリガ機能の後に説明します。イベントがトリガされると、最初の引数としてイベントオブジェクトは、関数に渡されます。タイプイベントオブジェクトは、特定のイベントに依存します。例えば、イベントがのMouseEvent（マウスイベント）オブジェクトを属する「クリック」。
useCapture	オプション。キャプチャまたはバブリング段階でのイベント実行するかどうかを指定するブール値。可能な値：真 - キャプチャ段階中に実行されるイベントハンドラ偽デフォルト。イベントハンドラは、バブリング段階で実行します

技術的詳細

DOMのバージョン：	DOMレベル2イベント
戻り値：	戻り値なし
レコード：	useCaptureパラメータでのFirefox 6とOpera 11.60ではオプションです。（クローム、IE、およびSafariでは常にオプションとなっています）。

より多くの例

例

関数名外部関数によって参照することができます。

document.addEventListener（、てmyFunction」をクリックしてください "）;

ファンクションてmyFunction（）{
。のdocument.getElementById（ "デモ"）innerHTMLの=の "Hello World";
}

»をお試しください

例

あなたは、既存のイベントを上書きすることはありませんイベントを追加し、文書内など多くのイベントを追加することができます。

この例では、2つの文書でクリックイベントを追加する方法を示しています。

document.addEventListener（、てmyFunction」をクリックしてください "）;
document.addEventListener（、someOtherFunction」をクリックしてください "）;

»をお試しください

例

あなたは、ドキュメント内のさまざまな種類のイベントを追加することができます。

この例では、ドキュメント内の複数のイベントを追加する方法を示しています。

document.addEventListener（「マウスオーバー」、てmyFunction）;
document.addEventListener（、someOtherFunction」をクリックしてください "）;
document.addEventListener（「マウスアウト」、someOtherFunction）。

»をお試しください

例

パラメータ値を渡すときは、パラメータ「無名関数」で関数呼び出しを使用します。

document.addEventListener（「クリック」、関数（）{
myFunction（P1、P2）。
}）;

»をお試しください

例

背景の<body>要素を変更します。

document.addEventListener（「クリック」、関数（）{
document.body.style.backgroundColor = "赤";
}）;

»をお試しください

例

イベントハンドラを追加するには、addEventListener（）メソッドを使用して削除するには、removeEventListener（）メソッドを使用：

//ドキュメントにイベントハンドラを追加します。
document.addEventListener（ "のMouseMove」、てmyFunction）;

//ドキュメントのイベントハンドラを削除します
document.removeEventListener（ "のMouseMove」、てmyFunction）;

»をお試しください

例

お使いのブラウザはにaddEventListener（）メソッドをサポートしていない場合は、代わりにattachEvent（）メソッドを使用することができます。

次の例では、クロスブラウザのソリューションを示しています。

IEのIE 8およびそれ以前のバージョンを除く場合（document.addEventListener）{//すべての主要なブラウザ、
document.addEventListener（、てmyFunction」をクリックしてください "）;
}エルス場合（document.attachEvent）{// IE 8とIEの以前のバージョン
document.attachEvent（ "onclickの"、てmyFunction）;
}

»をお試しください

JavaScript & HTML DOM リファレンスマニュアル

JavaScript オブジェクト

Browser オブジェクト

DOM オブジェクト

HTML オブジェクト

HTML DOMのaddEventListener（）メソッド

例

定義と使用法

ブラウザのサポート

文法

パラメータ値

技術的詳細

より多くの例

例

例

例

例

例

例

例

関連ページ