JavaScript オブジェクト

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

document.addEventListener()イベントハンドラをドキュメントに追加する方法。

使用document.removeEventListener()addEventListener()メソッドと一緒に追加されたイベントハンドラを削除する方法。

使用element .addEventListener()このメソッドは、指定された要素にイベントハンドラを追加します。

document.addEventListener(event, listener, useCapture)

サンプル

document.addEventListener("click",　function()　{
alert("Hello World!!!");
});

このテーブルの数字は、addEventListener()メソッドを完全にサポートする最初のブラウザバージョンを指定します：

メソッド
addEventListener()	1	1	7	1.0	9

引数	説明
event	（必須）イベントはどんな有効なJavaScriptイベントでもできます。イベントを使用する際には「on」接頭辞を使用しません。例えば、「click」を「onclick」、「mousedown」を「onmousedown」に置き換えます。すべてのHTML DOMイベントのリストについては、私たちの完全なHTML DOMイベントオブジェクトリファレンス。
listener	（必須）イベントに対応するJavaScript関数です。イベントが発生したとき、イベントオブジェクトは最初の引数として関数に渡されます。イベントオブジェクトのタイプは指定されたイベントに依存します。例えば、「click」イベントはMouseEventオブジェクトに属します。
useCapture	（オプション）真偽値、キャプチャフェーズまたはバブルフェーズでイベントを実行するかを指定します。デフォルトはfalseです。可能な値： true-イベントリスナーはキャプチャフェーズで実行されます false-イベントリスナーはバブルフェーズで実行されます私たちのJavaScript イベント伝播チュートリアルでイベントの伝播に関する詳細情報を読む

返り値：	なし
DOMバージョン：	DOM 2階層

クリックイベントをドキュメントに追加します。ユーザーがドキュメント内のどこかをクリックしたとき、<p>要素を使用してid="para"の「Hello World」を出力してください：

サンプル

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});

この例では、外部の「名前付き」関数を参照しています：

サンプル

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

ドキュメントに多くのイベントを追加できますが、既存のイベントをオーバーライドしません：

サンプル

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);

さまざまなタイプのイベントをドキュメントに追加できます：

サンプル

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);

パラメータ値を渡す場合、匿名関数を使用して指定された関数を呼び出します：

サンプル

document.addEventListener("click",　function()　{
myFunc(x,　y);
});

JavaScript 教程：イベント伝播

HTML DOM 参考リファレンス：document.removeEventListener()

HTML DOM 参考リファレンス：element .addEventListener()