関連する読み物：
javascriptイベント学習概要（v）JSのマウスイベントタイプ
//www.vevb.com/article/86259.htm
JavaScriptイベント学習概要（i）イベントフロー
//www.vevb.com/article/86261.htm
JavaScriptイベント学習概要（iv）イベントのパブリックメンバー（プロパティと方法）
//www.vevb.com/article/86262.htm
JavaScriptイベント学習概要（ii）JSイベントハンドラー
//www.vevb.com/article/86264.htm
JavaScriptイベント学習概要（iii）JSイベントオブジェクト
1。イベントハンドラー
前述のように、イベントは、クリック、ロード、マウスオーバーなど、ユーザーまたはブラウザ自体によって実行されるアクションがすべてイベントの名前です。特定のイベントに応答する機能は、イベントハンドラー（イベントハンドラー、イベントハンドラーとも呼ばれます）と呼ばれます。イベントハンドラーの名前は「on」で始まるため、クリックイベントのイベントハンドラーはオンクリックであり、ロードイベントのイベントハンドラーはオンロードです。
イベントにイベントハンドラーを指定する主な方法は3つあります。
1。HTMLイベントハンドラー
まず第一に、このアプローチは時代遅れです。アクション（JavaScriptコード）とコンテンツ（HTMLコード）がしっかりと結合されているためです。ただし、小さなデモを書くときはまだ使用できます。
これを行うには2つの方法がありますが、どちらも非常に単純です。
最初のタイプ：HTMLにイベントハンドラーと付属のアクションを直接定義します。
コードコピーは次のとおりです
2番目のタイプ：HTMLのイベントハンドラーを定義し、実行されたアクションは他の場所で定義されたスクリプトを呼び出します。
コードコピーは次のとおりです。<入力型= "ボタン"値 "bulation" click me！ "/> <script> function showmessage（）{alert（" clicked！ "）;} </script>
注記：
1）イベント変数を介して、イベント自体に直接アクセスできます。たとえば、onclick = "alert（event.type）"がクリックイベントをポップアップします。
2）この値は、ターゲット要素が入力されるイベントのターゲット要素に等しくなります。たとえば、onclick = "alert（this.value）"は、入力要素の値値を取得できます。
2。DOM0レベルイベントハンドラー
この方法はシンプルでクロスブラウザーですが、1つの要素にイベントハンドラーのみを追加できます。
この方法は複数のイベントハンドラーを要素に追加するため、以下は前のものをオーバーライドします。
イベントハンドラーを追加：
<入力型= "ボタン"値= "クリックしてください！" onclick = "showmessage（）"/> <script> function showmessage（）{alert（ "clicked！"）;} </script>イベントハンドラーを削除します：
コードコピーは次のとおりです。mybtn.onclick= null;
3。DOM2レベルイベントハンドラー
DOM2レベルのイベントハンドラーは、複数のイベントハンドラーを1つの要素に追加できます。イベントハンドラーを追加および削除するための2つの方法を定義します：AddEventListener（）とremoveEventListener（）。
どちらの方法でも、イベント名、イベントハンドラー機能、ブール値の3つのパラメーターが必要です。
このブール値は真実であり、イベントはキャプチャステージで処理される偽りであり、イベントはバブルステージで処理されます。
イベントハンドラーを追加：ボタンに2つのイベントハンドラーを追加し、1つは「Hello」をポップアップし、もう1つは「World」をポップアップします。
<入力id = "mybtn" type = "button" value = "Click me！"/> <script> var mybtn = document.getElementById（ "mybtn"）; mybtn.addeventlistener（ "click"、function（）{alert（ "hello"）;}、false）; mybtn.addeventlistener（ "click"、function（）{alert（ "world"）;}、false）; </script>イベントハンドラーの削除： AddEventListenerを介して追加されたイベントハンドラーは、RemoveEventListenerを介して削除する必要があり、パラメーターは一貫しています。
注：AddEventListenerを介して追加された匿名関数は削除されません。次のコードは機能しません！
コードコピーは次のとおりです。mybtn.removeeventlistener（ "click"、function（）{alert（ "world"）;}、false）;
RemoveEventListenerは上記のAddEventListenerパラメーターと一致しているようですが、実際、2番目のパラメーターの匿名関数は完全に異なります。
したがって、イベントハンドラーを削除するために、コードは次のように書くことができます。
<入力id = "mybtn" type = "button" value = "Click me！"/> <script> var mybtn = document.getElementById（ "mybtn"）; var handler = function（）{alert（ "hello"）; } mybtn.addeventlistener（ "click"、handler、false）; mybtn.removeeventlistener（ "click"、handler、false）; </script>2。IEイベントハンドラー
1。実用的なアプリケーションシナリオ
IE8以下のブラウザは、AddEventListenerをサポートしていません。実際の開発でIE8以下のブラウザと互換性がある場合。ネイティブのバインディングイベントを使用し、互換性のある処理を行う必要がある場合は、代わりにjQueryバインドを使用できます。
2。IE8イベントバインディング
IE8と次のブラウザは、domのように2つの同様のメソッドを実装します：actitionevent（）とdetachevent（）。
どちらの方法でも、イベントハンドラー名とイベントハンドラー機能の2つのパラメーターが必要です。
注記：
IE11はAddEventListenerのみをサポートしています！
IE9とIE10は、ActitionEventとAddEventListenerをサポートしています！
TE8以下のサポートAtachEventのみ！
次のコードを使用して、さまざまなIEバージョンブラウザーでテストできます。
<入力id = "mybtn" type = "button" value = "Click me！"/> <script> var mybtn = document.getElementById（ "mybtn"）; var handlerie = function（）{alert（ "helloie"）; } var handlerdom = function（）{alert（ "hellodom"）; } mybtn.addeventlistener（ "click"、handlerdom、false）; mybtn.attachevent（ "onclick"、Handlerie）; </script>イベントハンドラーを追加：ボタンに2つのイベントハンドラーを追加し、1つは「Hello」をポップアップし、もう1つは「World」をポップアップします
<Script> var mybtn = document.getElementById（ "mybtn"）; mybtn.attachevent（ "onclick"、function（）{alert（ "hello"）;}）; mybtn.attachevent（ "onclick"、function（）{alert（ "world"）;}）; </script>注：ここでの操作効果は注目に値します。
「World」は、IE8の下のブラウザで最初にポップアップし、次に「Hello」です。 DOMでトリガーされるイベントの順序は反対です。
IE9以降のブラウザは、最初に「Hello」をポップアップし、次に「World」をポップアップします。 DOMでトリガーされるイベントと同じ順序。
IEブラウザが徐々に正しい軌道に乗っていることがわかります。 。 。
イベントハンドラーの削除： AttachEventを介して追加されたイベントハンドラーは、Detacheventメソッドを介して削除する必要があり、パラメーターは一貫しています。
DOMイベントと同様に、追加された匿名関数は削除されません。
したがって、イベントハンドラーを削除するために、コードは次のように書くことができます。
<入力id = "mybtn" type = "button" value = "Click me！"/> <script> var mybtn = document.getElementById（ "mybtn"）; var handler = function（）{alert（ "hello"）; } mybtn.attachevent（ "onclick"、ハンドラー）; mybtn.detachevent（ "onclick"、ハンドラー）; </script>注：IEイベントハンドラー：Scopeに注意を払う別の場所があります。
AttachEvent（）メソッドを使用して、イベントハンドラーはグローバルスコープで実行されるため、これはウィンドウに等しくなります。
DOM2またはDOM0レベルでのメソッドの範囲は要素内にあり、この値はターゲット要素です。
次の例がtrueになります。
<入力id = "mybtn" type = "button" value = "Click me！"/> <script> var mybtn = document.getElementById（ "mybtn"）; mybtn.attachevent（ "onclick"、function（）{alert（this === window）;}）; </script>これは、クロスブラウザーコードを書くときに留意すべきことです。
IE7/8検出：
// IE7/8互換性検出var isie = !! window.activexobject; var isie6 = isie &&！window.xmlhttprequest; var isie8 = isie && !! document.documentmode; var isie7 = isie &&！isie6 &&！isie8; if（isie8 || isie7）{li.attachevent（ "onclick"、function（）{_marker.openinfowindow（_iw）;}）} els {li.addeventlistener（ "click"、function（）{_marker.openinfowindow（_iw）;}}}上記は、編集者が紹介したJSイベントハンドラーのJavaScriptイベント学習概要（II）の関連知識です。私はそれが誰にでも役立つことを願っています！