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 つの方法があります。
イベント配信では、要素イベントが発生する順序を定義します。

要素を

addEventListener(event, function, useCapture);

element.removeEventListener("mousemove", myFunction);

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);