まず、なぜイベントリスナーが必要なのでしょうか？
我々は、複数のイベントハンドラんをバインドするために、同じオブジェクトに対して同じイベントを持つことができますか？
インライン結合および動的結合することによって可能ではなく、イベントリスナーによって達成することができます。
=関数window.onload（）{
バインディング//動的
のdocument.getElementById（ 'BTN'）のonclick =関数（）{
アラート（ 'はじめに'）;
}
//動的結合
のdocument.getElementById（ 'BTNを'）。 =関数のonclick（）{
アラート（ '第2'）;
}
}
<input type = "ボタン" 値= "点击" ID = "BTN">
第二に、どのようにイベントリスナーを実装するには？
JavaScript言語は、クライアントに属し、すべてのブラウザが同じメーカーではないので、統一標準、Javascriptの互換性の問題はありませんので。同様に、イベントリスナーにも互換性の問題を抱えている、方法別のブラウザの下に作成しますそれは異なっています。
IEブラウザ（IE8以下、360、イヌ検索、ブラウザ2345互換モード）に基づいて、1カーネル
DOMは.attachEvent（タイプ、コールバック）をオブジェクト。
主な機能：結合関連付けられたイベントハンドラ（コールバック）は、DOMオブジェクトイベントの一種であります
| パラメータ | 説明 |
| タイプ | onkeydownを、このようonclickのようなイベントのタイプ |
| 折り返し電話 | イベントハンドラ、通常は無名関数 |
=関数window.onload（）{
リスナーイベントにおける// IEブラウザ
のdocument.getElementById（ 'BTN'）attachEvent（ 'のonclick'、関数（）{
アラート（ '最初の'）;
}）
// IEでリスナーブラウザイベントを使用して
のdocument.getElementById（ 'BTN'）attachEvent（ 'のonclick'、関数（）{
アラート（ '第2'）;
}）
}
W3Cコアブラウザ（IE9以降、FirefoxやGoogle Chromeの、国内のブラウザスピードモード）に基づいて、2。
DOM对象.addEventListener（タイプ、コールバック、キャプチャ）。
主な機能：結合関連付けられたイベントハンドラ（コールバック）は、DOMオブジェクトイベントの一種であります
| パラメータ | 説明 |
| タイプ | イベントタイプは、そのようなクリックなどの接頭辞、なし、KeyDownイベント |
| 折り返し電話 | イベントハンドラ、通常は無名関数 |
| キャプチャー | デフォルト値はfalseですので、ブラウザモデル、真（キャプチャ・モデル）、偽（バブリングモデル）は、次のデフォルトIE8は、モデルブラウザをバブリングサポートしています。 |
=関数window.onload（）{
リスナーイベントで使用// W3Cブラウザ
のdocument.getElementById（ 'BTN'）のaddEventListener（ 'クリック'、関数（）{
アラート（ '最初の'）;
}）
// W3Cでリスナーブラウザイベントを使用して
のdocument.getElementById（ 'BTN'）のaddEventListener（ 'クリック'、関数（）{
アラート（ '第2'）;
}）
}
三、IEのカーネルとカーネルイベントリスナー差W3C
1.異なる結合構文
IE：attachEvent
W3C：addEventListenerを
異なるパラメータの2種類
IE：イベントは、+のイベントとして、接頭辞「オン」に追加します
W3C：イベントは、このようなイベントとして、接頭辞「on」に追加する必要はありません。
3.異なるパラメータの数
IE：2つのパラメータ、タイプ、コールバック
W3C：3つのパラメータ、タイプ、コールバック、キャプチャ（ブラウザモデル）
4.トリガー異なる順序
IE：リバーストリガー、トリガー第一の結合後
W3C：正のシーケンスのトリガー、第一の結合最初のトリガ
第四に、イベントリスナーは、互換性を解決します
/ **
*解決の互換性の問題イベントリスナー
* @param {オブジェクト} OBJオブジェクト
* @param {文字列}タイプの時間タイプ、接頭辞'オン'なし
* @param {機能}コールバックハンドラのイベント
* /
機能addEvent（OBJ 、タイプ、コールバック）{
IF（obj.addEventListener）{
// W3Cカーネル
obj.addEventListener（タイプ、コールバック）;
}他{
//のIEコア
obj.attachEvent（ 'ON' +タイプ、コールバック）;
}
}
ウィンドウ。 =関数のonload（）{
// BTNリスナー結合事象のボタンである
addEvent（のdocument.getElementById（ 'BTN'）、 'クリック'、関数（）{
アラート（ '最初の'）;
}）
// BTNボタン結合でありますイベントリスナー
addEvent（のdocument.getElementById（ 'BTN'） 、 'クリック'関数（）{
アラート（ '第2'）;
}）
}
V.削除イベント・リスナー
実際のプロジェクトの開発では、動的にイベントリスナーを削除する必要があるかもしれません。
IEブラウザに基づく1.カーネル
detachEvent（タイプ、コールバック）; //削除イベント・リスナー
主な機能：IEブラウザでイベントリスナーを削除するには、カーネル
| パラメータ | 説明 |
| タイプ | onmouseover属性、などのonclickなどのイベントの種類を、削除するには |
| 折り返し電話 | イベントハンドラは、関数の通常名の名前を削除するには |
2. W3Cブラウザカーネルに基づいて、
removeEventListener（タイプ、コールバック）; //削除イベント・リスナー
主な機能：W3Cブラウザカーネルにイベントリスナーを削除します
| パラメータ | 説明 |
| タイプ | 、クリック、マウスオーバーなどのイベントの種類を削除するには |
| 折り返し電話 | イベントハンドラは、関数の通常名の名前を削除するには |
特記事項：オブジェクトが削除されたイベントであることをした場合、その結合イベントリスナーイベントハンドラ関数が分かっていなければならない、そうでない場合は削除することは不可能である、忘れないでください！！！
FN1関数（）{
アラート（ '最初の'）;
}
関数Fn2が（）{
アラート（ '第2'）;
}
window.onload =関数（）{
VAR BTN =のdocument.getElementById（ 'BTN'）;
VARデル=ドキュメント.getElementById（ '・デル・'）;
//バインドイベントリスナーBTNボタンに
addEvent（BTN、 'クリック'、FN1は）;
//バインドイベントリスナーBTNボタンに
addEvent（BTN、 'クリック'、FN2）は、
デル。 =関数のonclick（）{
// IEコアリスナーFN1イベント下で除去
btn.detachEvent（ 'のonclick'、FN1） 、
FN2イベントリスナー// W3Cカーネル除去
btn.removeEventListener（ 'クリック'、FN2） 。
}
}
<input type = "ボタン"値= "点击" ID = "BTN"> の<input type = "ボタン"値= "移除" ID = "デル">
第六に、イベントリスナーを削除するの互換性の問題を解決
/ **
*削除イベント・リスナーの解決の互換性の問題
* @param {オブジェクト} OBJオブジェクト
* @param {文字列}タイプの時間タイプ、なしの接頭辞「オン」
* @param {機能}コールバックハンドラのイベント
* /
ファンクションremoveEvent （OBJ、タイプ、コールバック）{
IF（obj.removeEventListener）{
// W3Cカーネル
obj.removeEventListener（タイプ、コールバック）;
}他{
//のIEコア
obj.detachEvent（ 'ON' +タイプ、コールバック）;
}
}
FN1関数（）{
アラート（ '最初の'）;
}
関数Fn2が（）{
アラート（ '第2'）;
}
window.onload =関数（）{
VAR BTN =のdocument.getElementById（ 'BTN'）;
VARデル=ドキュメント.getElementById（ '「は）;
//ボタン結合イベントリスナーがBTNある
addEvent（BTN、 'クリック'、もう一度Fn1）;
//バインドBTNボタンイベントリスナーがある
addEvent（BTN、 'クリック'、Fn2が）;
del.onclick =関数（）{
//互換性を除去
removeEvent（BTN、 'クリック'、もう一度Fn1）を、
removeEvent（BTN、 'クリック'、Fn2が）;
}
}