addEventListener()メソッド
例
ユーザーがボタンをクリックしたときに発火するイベントリスナーを追加します。
document.getElementById("myBtn").addEventListener("click", displayDate); »それを自分で試してみてください addEventListener()メソッドは、指定された要素にイベントハンドラをアタッチします。
addEventListener()メソッドは、既存のイベントハンドラを上書きせずに要素にイベントハンドラをアタッチします。
あなたは一つの要素に多くのイベントハンドラを追加することができます。
次の2つ、すなわち、一つの要素に同じタイプの多くのイベントハンドラを追加することができます"click"イベント。
あなたは、任意のDOMオブジェクトだけでなく、HTML要素にイベントリスナーを追加することができます。 ウィンドウオブジェクトすなわち。
addEventListener()メソッドは、それが簡単にイベントがバブリングにどのように反応するかを制御することができます。
使用している場合addEventListener()メソッドを、JavaScriptを読みやすくするために、HTMLマークアップから分離され、あなたがHTMLマークアップを制御しない場合でも、イベントリスナーを追加することができますされています。
あなたは簡単に使用してイベントリスナーを削除することができますremoveEventListener()メソッドを。
構文
element .addEventListener( event, function, useCapture );最初のパラメータは、（のようなイベントの一種である"click"または"mousedown" ）。
2つ目のパラメータは、私たちはイベントが発生したときに呼び出したい関数です。
3番目のパラメータはイベントバブルやイベントのキャプチャを使用するかどうかを指定するブール値です。 このパラメータはオプションです。
あなたが使用していないことに注意してください"on"イベントの接頭辞。 使用する"click"の代わりに"onclick" 。
要素にイベントハンドラを追加します。
例
アラートに "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 ;
});
»それを自分で試してみてください パラメータを渡します
パラメータ値を渡すときは、パラメータで指定された関数を呼び出す「無名関数」を使用します。
イベントバブルやイベントのキャプチャ？
HTML DOM、バブリングとキャプチャのイベント伝播の二つの方法があります。
イベントの伝播は、イベントが発生したときに要素の順序を定義する方法です。 あなたが持っている場合は<p>内部要素<div>要素、およびをユーザーがクリックする<p>要素を、要素のどの"click"イベントが最初に処理すべきか？
： バブリングでは、最も内側の要素のイベントは、最初にして外側に処理される<p>要素のクリックイベントが、最初に処理された後<div>要素のクリックイベントを。
：最も外側の要素のイベントが最初にして内部処理されますキャプチャで<div>要素のクリックイベントが最初に処理され、その後、 <p>要素のクリックイベント。
addEventListener()メソッドあなたが使用して伝播タイプを指定することができます"useCapture"パラメータを：
addEventListener( event , function , useCapture );デフォルト値は、値がtrueに設定されている場合、イベントはキャプチャの伝播を使用して、バブリング伝播を使用している、falseです。
例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
»それを自分で試してみてください removeEventListener()メソッド
removeEventListener()メソッドは、に添付されたイベントハンドラ削除addEventListener()メソッドを：
ブラウザのサポート
表中の数字は完全にこれらのメソッドをサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注： addEventListener()とremoveEventListener()メソッドは、IE 8とそれ以前のバージョンでサポートされていませんOpera 6.0およびそれ以前のバージョン。 しかし、これらの特定のブラウザのバージョンは、あなたが使用することができますattachEvent()要素にイベントハンドラをアタッチする方法を、およびdetachEvent()メソッドは、それを削除するには：
element. attachEvent (event, function);
element. detachEvent (event,
function); 例
クロスブラウザのソリューション：
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
»それを自分で試してみてください HTML DOMイベントオブジェクトのリファレンス
すべてのHTML DOMイベントのリストについては、当社の完全なを見てHTML DOMイベントオブジェクトのリファレンス 。