JavaScript は EventListener を使用して HTML DOM を操作する

addEventListener() メソッド
例
ユーザーがボタンをクリックすると、リッスンイベントがトリガーされます:

document.getElementById("myBtn").addEventListener("click", displayDate);

ログイン後にコピー

addEventListener() メソッドは、指定された要素にイベントハンドラーを追加するために使用されます。
addEventListener() メソッドによって追加されたイベントハンドラーは、既存のイベントハンドラーを上書きしません。
1 つの要素に複数のイベントハンドラーを追加できます。
2 つの「クリック」イベントなど、同じタイプの複数のイベントハンドラーを同じ要素に追加できます。
イベントリスナーは、HTML 要素だけでなく、任意の DOM オブジェクトに追加できます。例: ウィンドウオブジェクト。
addEventListener() メソッドを使用すると、イベント (バブリングとキャプチャ) の制御が簡単になります。
addEventListener() メソッドを使用すると、JavaScript が HTML マークアップから分離されるため、読みやすくなり、HTML マークアップを制御せずにイベントリスナーを追加できます。
RemoveEventListener() メソッドを使用してイベントリスナーを削除できます。
文法

element.addEventListener(event, function, useCapture);

ログイン後にコピー

最初のパラメータはイベントのタイプ (「クリック」や「マウスダウン」など) です。
2 番目のパラメーターは、イベントがトリガーされた後に呼び出される関数です。
3 番目のパラメータは、イベントがバブルするかキャプチャするかを記述するために使用されるブール値です。このパラメータはオプションです。
注: 「on」プレフィックスは使用しないでください。たとえば、「onclick」の代わりに「click」を使用します。

元の要素にイベントハンドラーを追加します
例
ユーザーが要素をクリックすると、「Hello World!」が表示されます:

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

ログイン後にコピー

関数名を使用して外部関数を参照できます:
例
ユーザーが要素をクリックすると、「Hello World!」が表示されます:

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

ログイン後にコピー

同じ要素に複数のイベントハンドラーを追加します
addEventListener() メソッドを使用すると、既存のイベントを上書きせずに、同じ要素に複数のイベントを追加できます:
例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

ログイン後にコピー

同じ要素に異なるタイプのイベントを追加できます:
例

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

ログイン後にコピー

Window オブジェクトにイベントハンドラーを追加します
addEventListener() メソッドを使用すると、HTML 要素、HTML ドキュメント、ウィンドウオブジェクトなどの HTML DOM オブジェクトにイベントリスナーを追加できます。または、xmlHttpRequest オブジェクトなどの他の支出イベントオブジェクト。
例
ユーザーがウィンドウサイズをリセットするときにイベントリスナーを追加します:

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

ログイン後にコピー

パラメータを渡す
パラメータ値を渡すときは、「匿名関数」を使用してパラメータ付きの関数を呼び出します:
例

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

ログイン後にコピー

イベントバブリングまたはイベントキャプチャ?
イベント配信にはバブリングとキャプチャという 2 つの方法があります。
イベント配信では、要素イベントが発生する順序を定義します。

要素を

要素に挿入し、ユーザーが

要素をクリックした場合、どの要素の「click」イベントが最初にトリガーされますか?
バブリングでは、内側の要素のイベントが最初にトリガーされ、次に外側の要素がトリガーされます。つまり、

要素の click イベントが最初にトリガーされ、次に

要素の click イベントがトリガーされます。トリガーされます。
キャプチャでは、外側の要素のイベントが最初にトリガーされ、次に内側の要素のイベントがトリガーされます。つまり、

要素の click イベントが最初にトリガーされ、次に

要素の click イベントがトリガーされます。

要素がトリガーされます。
addEventListener() メソッドでは、「useCapture」パラメータを指定して配信タイプを設定できます:

addEventListener(event, function, useCapture);

ログイン後にコピー

デフォルト値は false で、値が true の場合、イベントはキャプチャを使用して配信されます。
例
document.getElementById("myDiv").addEventListener("click", myFunction, true);

試してみる »

removeEventListener() メソッド
RemoveEventListener() メソッドは、addEventListener() メソッドによって追加されたイベントハンドラーを削除します:
例

element.removeEventListener("mousemove", myFunction);

ログイン後にコピー

ブラウザのサポート
表内の数字は、このメソッドをサポートする最初のブラウザのバージョン番号を表します。
JavaScript は EventListener を使用して HTML DOM を操作する_基礎知識
注: IE 8 およびそれ以前の IE バージョン、Opera 7.0 およびそれ以前のバージョンは、addEventListener() メソッドと RemoveEventListener() メソッドをサポートしていません。ただし、そのようなブラウザーのバージョンでは、detachEvent() メソッドを使用してイベントハンドラーを削除できます:

element.attachEvent(event, function);
element.detachEvent(event, function);

ログイン後にコピー

例
クロスブラウザーの回避策:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);

ログイン後にコピー