HTML DOM addEventListener() メソッド

定義と用法

addEventListener() イベントハンドラを要素に追加する方法。

实例

インスタンス

例 1

以下の<button>要素にclickイベントを追加：
element.addEventListener("click", myFunction);
  よりコンパクトなコード：
function myFunction() {

実際に試してみてください

}

例 2

element.addEventListener("click", function() {
  よりコンパクトなコード：
});

実際に試してみてください

document.getElementById("demo").innerHTML = "Hello World";

さらに多くの例はページの下部にあります。

文法同じノード上で同じelement.addEventListener( 「click」を使用して「onclick」を使用しないでください。element.addEventListener( type,

)

) 引数
同じノード上で同じ

説明

必須。イベントの名前。

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


DOM イベントの完全リスト
「click」を使用して「onclick」を使用しないでください。 function
type

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

  • オプション（デフォルト = false）。 false
  • - 冒泡フェーズで実行されます。 true

- 捕獲フェーズで実行されます。

返り値

なし。

技術的詳細 同じノード上で同じ のイベント。 type 指定されたイベントリスナー関数を現在のノードのリスナー集合に追加し、指定されたタイプのイベントを処理するために、 type trueの場合、キャプチャイベントリスナーとして登録されます。

falseの場合、通常のイベントリスナーとして登録されます。

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

パラメータで2度登録された場合、2度目の登録は無視されます。イベントを処理しているときに、そのノードに新しいイベントリスナーが登録された場合、そのイベントに対して新しいイベントリスナーは呼び出されません。 Node.cloneNode() メソッドまたは Document.importNode() Documentクラスのノードをコピーする際には、元のノードに登録されたイベントリスナーはコピーされません。

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

さらに多くの例

例 3

同じ要素に多くのイベントを追加できます：

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

実際に試してみてください

例 4

同じ要素に異なるイベントを追加できます：

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

実際に試してみてください

例 5

パラメータの値を渡す場合は、「匿名関数」を使用してください：

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

実際に試してみてください

例 6

<button> 要素の背景色を変更する：

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

実際に試してみてください

例 7

バブルとキャプチャの違い：

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

実際に試してみてください

例 8

イベントハンドラを削除する：

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

実際に試してみてください

ブラウザのサポート

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

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

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

関連ページ

要素メソッド：

addEventListener() メソッド

removeEventListener() メソッド

ドキュメントメソッド：

addEventListener() メソッド

removeEventListener() メソッド

チュートリアル：

HTML DOM EventListener

DOM イベントの完全リスト