HTML DOM要素addEventListener（）
例
クリックイベントを<button>要素に追加します。
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
よりコンパクトなコード：
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
以下のその他の例。
定義と使用法
このaddEventListener()メソッドは、イベントハンドラーを要素にアタッチします。
関連項目：
element.removeEventListener（）メソッド
document.addEventListener（）メソッド
document.removeEventListener（）メソッド
チュートリアル
構文
element.addEventListener(event, function, useCapture)
パラメーター
| Parameter | Description |
| event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
| function | Required. The function to run when the event occurs. |
| useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
戻り値
| なし |
その他の例
同じ要素に多くのイベントを追加できます。
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
同じ要素に異なるイベントを追加できます。
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
パラメータ値を渡すには、「無名関数」を使用します。
element.addEventListener("click", function() {
myFunction(p1, p2);
});
<button>要素の背景色を変更します。
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
バブリングとキャプチャの違い：
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
イベントハンドラーを削除します。
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
ブラウザのサポート
element.addEventListener() DOMレベル2（2001）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |