HTML DOM Document addEventListener() メソッド

定義と使用法

addEventListener() イベントハンドラをドキュメントに追加するメソッド。

インスタンス

例1

ドキュメントにclickイベントを追加：

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

自分で試してみてください

よりシンプルな文法：

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

自分で試してみてください

例 2

ドキュメントに複数のイベントリスナーを追加できます：

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

自分で試してみてください

例 3

異なるタイプのイベントを追加できます：

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

自分で試してみてください

例 4

パラメータを渡す場合は、パラメータを持つ関数を「匿名関数」を使用して呼び出してください：

document.addEventListener("click", function() {
  myFunction(p1, p2);
});

自分で試してみてください

例 5

ドキュメントの背景色を変更します：

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

自分で試してみてください

例 6

removeEventListener() メソッドを使用して：

// イベントリスナーを追加
document.addEventListener("mousemove", myFunction);
// イベントリスナーを削除
document.removeEventListener("mousemove", myFunction);

自分で試してみてください

文法

document.addEventListener(type, function, キャプチャ)

パラメータ

パラメータ 説明
type

必要です。イベント名です。

「on」接頭辞を使用しないでください。

"click" を使用してください「onclick」の代わりに。

すべての HTML DOM イベントは以下に記載されています：

HTML DOM イベントオブジェクトリファレンスマニュアル
function

必要です。イベントが発生したときに実行される関数です。

イベントが発生したとき、イベントオブジェクトは関数の最初の引数として渡されます。

イベントオブジェクトのタイプは指定されたイベントによって異なります。例えば、「click」イベントは MouseEvent オブジェクトに属します。
キャプチャ

オプション（デフォルト = false）。

  • true - キャプチャフェーズで実行されます
  • false - ブブルバップフェーズで実行されます

返り値

なし。

技術的詳細

このメソッドは指定されたイベントタイプ type に対して現在のノードのリスナー集合に指定されたイベントリスナー関数を追加し、そのイベントを処理します。もし キャプチャ が true であれば、リスナーはキャプチャイベントリスナーとして登録されます。もし キャプチャ が false であれば、通常のイベントリスナーとして登録されます。

addEventListener() 複数回呼び出される可能性があります。同じノード上で同じタイプのイベントに対して複数のイベントハンドラを登録することもできますが、DOM は複数のイベントハンドラが呼び出される順序を確定できません。

同じノード上で同じ type と キャプチャ 2回目に登録すると、2回目の登録は無視されます。ノード上でイベントを処理しているときに、そのノードに新しいイベントリスナーが登録された場合、そのイベントに対して新しいイベントリスナーは呼び出されません。

パラメータを Node.cloneNode() メソッドまたは Document.importNode() メソッドが Document ノードをコピーする際には、元のノードに登録されたイベントリスナーはコピーされません。

このメソッドは Document と Window オブジェクトにも定義されており、動作方法も似ています。

ブラウザのサポート

document.addEventListener DOM レベル 2 (2001) の機能です。

すべてのブラウザで完全にサポートされています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート

関連ページ

要素メソッド

addEventListener() メソッド

removeEventListener() メソッド

ドキュメントメソッド

addEventListener() メソッド

removeEventListener() メソッド

チュートリアル

HTML DOM イベントリスナー

完全な DOM イベントリスト