JavaScript HTML DOM EventListener
addEventListener（）メソッド
例
ユーザーがボタンをクリックしたときに起動するイベントリスナーを追加します。
document.getElementById("myBtn").addEventListener("click", displayDate);
このaddEventListener()メソッドは、指定された要素にイベントハンドラーをアタッチします。
このaddEventListener()メソッドは、既存のイベントハンドラーを上書きせずに、イベントハンドラーを要素にアタッチします。
1つの要素に多くのイベントハンドラーを追加できます。
同じタイプの多くのイベントハンドラーを1つの要素、つまり2つの「クリック」イベントに追加できます。
HTML要素だけでなく、任意のDOMオブジェクトにイベントリスナーを追加できます。つまり、ウィンドウオブジェクトです。
このaddEventListener()メソッドを使用すると、イベントがバブリングにどのように反応するかを簡単に制御できます。
このメソッドを使用する場合addEventListener()、JavaScriptはHTMLマークアップから分離されているため、読みやすくなり、HTMLマークアップを制御していない場合でもイベントリスナーを追加できます。
removeEventListener()このメソッドを使用すると、イベントリスナーを簡単に削除できます。
構文
element.addEventListener(event, function, useCapture);
最初のパラメーターは、イベントのタイプです（ " click"、 " mousedown"、またはその他のHTML DOMイベントなど）。
2番目のパラメーターは、イベントが発生したときに呼び出す関数です。
3番目のパラメーターは、イベントバブリングとイベントキャプチャのどちらを使用するかを指定するブール値です。このパラメーターはオプションです。
イベントには「on」プレフィックスを使用しないことに注意してください。click「 」の代わりに「」を使用しますonclick。
要素にイベントハンドラーを追加する
例
アラート「HelloWorld！」ユーザーが要素をクリックしたとき：
element.addEventListener("click", function(){ alert("Hello World!"); });
外部の「名前付き」関数を参照することもできます。
例
アラート「HelloWorld！」ユーザーが要素をクリックしたとき：
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);
ウィンドウオブジェクトにイベントハンドラーを追加します
このaddEventListener()メソッドを使用すると、HTML要素、HTMLドキュメント、ウィンドウオブジェクト、またはオブジェクトなどのイベントをサポートするその他のオブジェクトなど、任意のHTMLDOMオブジェクトにイベントリスナーを追加できますxmlHttpRequest。
例
ユーザーがウィンドウのサイズを変更したときに起動するイベントリスナーを追加します。
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
パラメータの受け渡し
パラメータ値を渡すときは、パラメータを使用して指定された関数を呼び出す「無名関数」を使用します。
例
element.addEventListener("click", function(){ myFunction(p1, p2); });
イベントバブリングまたはイベントキャプチャ？
HTML DOMでのイベント伝播には、バブリングとキャプチャの2つの方法があります。
イベント伝播は、イベントが発生したときの要素の順序を定義する方法です。<div>要素内に<p>要素があり、ユーザーが<p>要素をクリックした場合、どの要素の「クリック」イベントを最初に処理する必要がありますか？
バブリングでは、最も内側の要素のイベントが最初に処理され、次に外側が処理されます。<p>要素のクリックイベントが最初に処理され、次に<div>要素のクリックイベントが処理されます。
キャプチャでは、最も外側の要素のイベントが最初に処理され、次に内側が処理されます。<div>要素のクリックイベントが最初に処理され、次に<p>要素のクリックイベントが処理されます。
addEventListener（）メソッドを使用すると、「useCapture」パラメーターを使用して伝播タイプを指定できます。
addEventListener(event, function, useCapture);
デフォルト値はfalseで、バブリング伝播を使用します。値がtrueに設定されている場合、イベントはキャプチャ伝播を使用します。
例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener（）メソッド
このremoveEventListener()メソッドは、addEventListener（）メソッドでアタッチされているイベントハンドラーを削除します。
例
element.removeEventListener("mousemove", myFunction);
HTMLDOMイベントオブジェクトリファレンス
すべてのHTMLDOMイベントのリストについては、完全なHTMLDOMイベントオブジェクトリファレンスを参照してください。