JavaScriptをHTML DOMのEventListener
addEventListener（）メソッド
例
イベントのリスニングユーザーがボタンをクリックしたときにトリガ：
»をお試しください
addEventListener（）メソッドは、指定された要素にイベントハンドラを追加するために使用されます。
イベントハンドラを追加するためには、addEventListener（）メソッドは、既存のイベントハンドラを上書きしません。
あなたは一つの要素に複数のイベントハンドラを追加することができます。
2「クリック」イベント：あなたのような、同じ要素にイベントハンドラの同じタイプの複数を追加することができます。
あなたはだけでなく、HTML要素、任意のDOMイベントリスナーにオブジェクトを追加することができます。 以下のような：ウィンドウオブジェクト。
addEventListener（）メソッドは、より簡単にイベント（バブリングとキャプチャ）を制御することができます。
あなたは、addEventListener（）メソッドを使用すると、彫る左からのJavaScript、HTMLタグ、より読みやすいが、コントロールのHTMLタグが存在しない場合にも、イベントリスナーを追加することができます。
あなたは、イベントリスナーを削除するには、removeEventListener（）メソッドを使用することができます。
文法
最初のパラメータは、（そのような「クリック」または「マウスダウン」など）のタイプのイベントです。
第二引数は、関数呼び出しがイベントの後にトリガされています。
3番目のパラメータは、イベントのバブリングまたはキャプチャを記述するために使用されるブール値です。 このパラメータはオプションです。
 | 注：「オン」の接頭辞を使用しないでください。 たとえば、代わりに "onclickの"の、 "クリック"を使用します。 |
|---|
オリジナルの要素は、イベントハンドラを追加します。
例
ユーザーは、ポップアップ要素をクリックすると、「Hello Worldの！」：
»をお試しください
あなたは、外部関数を参照するには、関数名を使用することができます。
例
ユーザーは、ポップアップ要素をクリックすると、「Hello Worldの！」：
ファンクションてmyFunction（）{
警告（ "Hello Worldの！"）;
}
»をお試しください
同じ要素に複数のイベントハンドラを追加します。
addEventListener（）メソッドを使用すると、同じ要素に複数のイベントを追加することができ、既存のイベントを上書きしません。
例
要素.addEventListener（、mySecondFunctionを「クリック」 ）。
»をお試しください
あなたは、さまざまな種類のイベントで同じ要素に追加することができます。
例
要素.addEventListener（、mySecondFunctionを「クリック」 ）。
要素.addEventListener（「マウスアウト」、myThirdFunction ）。
»をお試しください
Windowオブジェクトにイベントハンドラを追加します。
addEventListener（）メソッドでは、HTMLのDOMイベントリスナーにオブジェクトを追加することができ、HTML DOMは、オブジェクトのような：HTML要素、HTML文書、ウィンドウオブジェクト。 イベントオブジェクトまたはのようなその他の費用：XMLHttpRequestオブジェクト。
例
ユーザーは、イベントリスナーを追加するために、ウィンドウサイズをリセットする場合：
。のdocument.getElementById（ "デモ"）innerHTMLの= sometext。
}）;
»をお試しください
パラメータを渡します
パラメータ値を渡すときは、パラメータ「無名関数」で関数呼び出しを使用します。
イベントのキャプチャやイベントバブル？
バブリングとキャプチャ：2つの方法でイベント配信。
イベントトリガ定義された要素のイベント配信のため。 あなたは<pは> <div>要素への要素は、ユーザーがクリックする<p>要素、「クリック」イベントの要素は、それをトリガーする場合は？
すなわちバブリング、イベントは、外部の要素をトリガ、内部素子がトリガされるようになります：クリックイベント<p>要素が最初にトリガされ、その後、クリックイベントの<div>要素がトリガされます。
クリックイベントをトリガし、その後、クリックイベント<p>要素をトリガするために、<div>要素： キャプチャでは、イベントは、外部要素は、そのイベントがトリガされる内部要素、すなわちトリガされることになります。
配信の種類を設定する」useCapture」パラメータを指定するためには、addEventListener（）メソッド：
デフォルト値は、その値がtrueの場合、転送をキャプチャするためにイベントを使用し、渡すためにバブリングされ、falseです。
removeEventListener（）メソッド
イベントハンドラを追加するためには、addEventListener（）メソッドを削除するには、removeEventListener（）メソッド：
ブラウザのサポート
表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。
| ウェイ | |||||
|---|---|---|---|---|---|
| addEventListenerを（） | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener（） | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注：IE 8とIEの以前のバージョンを、オペラ7.0およびそれ以前のバージョンでは、addEventListenerを（）とにremoveEventListener（）メソッドをサポートしていません。 しかし、ブラウザのバージョンのこのタイプは、イベントハンドラを削除するdetachEvent（）メソッドを使用することができます。
element.detachEvent（イベント、関数）。
例
クロスブラウザのソリューション：
場合（x.addEventListener）{// IE 8およびそれ以前のバージョンを除くすべての主要なブラウザ、
x.addEventListener（、てmyFunction」をクリックしてください "）;
}エルス（x.attachEvent）{// IE 8およびそれ以前のバージョンの場合
x.attachEvent（ "onclickの"、てmyFunction）;
}
»をお試しください
HTML DOMイベントオブジェクトのリファレンス
すべてのHTML DOMイベントは、あなたが当社の完全見ることができますHTML DOMイベントオブジェクトの参照を 。