jQueryイベントバインディング
jQueryは、イベント監視用の4つのバインド方法、つまりバインドとオンを提供します。
監視を解放するための対応する機能は、それぞれバインド解除とオフになっています。
bind（イベント、[データ]、関数）
バインドは最も頻繁に使用されるものであり、その機能は、特定のイベントタイプのリスナー関数を選択した要素にバインドすることです。パラメーターの意味は次のとおりです。
イベント：クリック、変更、マウスオーバーなどのイベントタイプ。
data：監視関数に渡されるパラメーターは、event.dataを介して取得されます。オプション
function：monitor function、event objectを渡すことができます。eventはjQueryによってカプセル化されたイベントオブジェクトであり、元のイベントオブジェクトとは異なるため、使用する際には注意が必要です。
使用する：$("#div li").bind("click",myFun);
on（event、childSelector、data、function）
on（）メソッドは、選択した要素と子要素に1つ以上のイベントハンドラーを追加します。最も一般的に使用される
jQueryバージョン1.7以降、on（）メソッドはbind（）、live（）、delegate（）メソッドの新しい代替手段です。このメソッドはAPIに多くの利便性をもたらします。このメソッドをお勧めします。これにより、jQueryコードベースが簡素化されます。
注： on（）メソッドを使用して追加されたイベントハンドラーは、現在および将来の要素（スクリプトによって作成された新しい要素など）に適用できます。
ヒント：イベントハンドラーを削除するには、off（）メソッドを使用してください。
ヒント： 1回だけ実行されるイベントを追加してから削除するには、one（）メソッドを使用してください。
イベント：必須。選択した要素から削除する1つ以上のイベントまたは名前空間を指定します。複数のイベント値はスペースで区切られ、配列にすることもできます。有効なイベントである必要があります。
childSelector：オプション。指定された子要素にのみ追加できるイベントハンドラーを指定します（非推奨のdelegate（）メソッドなどのセレクター自体には追加できません）。
データ：オプション。関数に渡される追加データを指定します。
機能：オプション。イベントが発生したときに実行する関数を指定します。
使用：$（セレクター）.on（イベント、childSelector、データ、関数）;
.click（）、. trigger（）にもイベントバインディング効果があります
JavaScriptネイティブイベントバインディング
1. DOM要素の直接バインド：ここでのDOM要素はHTMLタグとして理解できます。JavaScriptは、タグ内のイベントの直接バインドをサポートしています
2. JavaScriptコードでのOnXXXバインディング：JavaScriptコードでのバインディングイベントは、JavaScriptコードをHTMLタグから分離でき、ドキュメント構造が明確であるため、管理と開発に便利です。
3.イベントリスナー関数のバインド：イベントをバインドする別の方法は、addEventListener（）またはattachEvent（）を使用してイベントリスナー関数をバインドすることです。
1.DOM要素での直接バインディング
1.ネイティブ関数
1 <inputοnclick= "alert（ 'サポートありがとうございます'）" type = "button" value = "Click me" />
2.カスタム機能
1 <inputοnclick= "myAlert（）" type = "button" value = "点我" />
2
3 <script type = "text / javascript">
4
5 function myAlert（）{
6
7 alert（ "谢谢これ" ）;
8
9}
10
11 </ script>
2.JavaScriptコードでのOnXXXバインディング
JavaScriptコードでイベントをバインドするための構文は次のとおりです。
elementObject.onXXX = function（）{
//イベント処理コード
}
その中：
- elementObjectは、DOMオブジェクト、つまりDOM要素です。
- onXXXはイベントの名前です。
たとえば、id = "demo"を使用してイベントをボタンにバインドし、そのタイプ属性を表示します。
1 <input id = "demo" type = "button" value = "クリックしてタイプ属性を表示" />
2
3 <script type = "text / javascript">
4
5 document.getElementById（ "demo"）。οnclick =関数（）{
6
; 7アラート（this.getAttribute（ "タイプ"））//これは、現在のイベントのHTML要素を指し、ここで、<div>タグで
8
9}
10 </ SCRIPT>
3.バインディングイベントリスナー関数
addEventListener（）関数の構文：
elementObject.addEventListener（eventName、handle、useCapture）;
| パラメータ | 説明 |
|---|---|
| elementObject | DOMオブジェクト（つまり、DOM要素）。 |
| イベント名 | イベントの名前。ここでは、マウスクリックイベントクリック、マウスダブルクリックイベントダブルクリック、マウス移動インイベントマウスオーバー、マウス移動イベントマウスアウトなど、イベント名に「オン」がないことに注意してください。 |
| 扱う | イベントハンドラー関数、つまり、イベントを処理するために使用される関数。 |
| useCapture | ブール型は、キャプチャを使用するかどうかに関係なく、通常はfalseを使用します。これには、JavaScriptイベントフローの概念が含まれます。これについては、以降の章で詳しく説明します。 |
attachEvent（）関数の構文:( IEと互換性があります）
elementObject.attachEvent（eventName、handle）;
| パラメータ | 説明 |
|---|---|
| elementObject | DOMオブジェクト（つまり、DOM要素）。 |
| イベント名 | イベントの名前。addEventListener（）とは異なり、ここでのイベント名には「on」が付いていることに注意してください。たとえば、マウスクリックイベントonclick、マウスダブルクリックイベントondoubleclick、マウス移動イベントonmouseover、マウス移動イベントonmouseoutなどです。 |
| 扱う | イベントハンドラー関数、つまり、イベントを処理するために使用される関数。 |
注：イベントハンドラー関数は、括弧なしで「関数名」を参照します。
addEventListener（）は、イベントリスナー関数をバインドする標準的なメソッドであり、W3C、Chrome、FireFox、Opera、Safari、IE9.0以降のバージョンでサポートされており、すべてこの関数をサポートしています。
ただし、IE8.0以下のバージョンはこのメソッドをサポートしておらず、attachEvent（）を使用してイベントリスナー関数をバインドします。したがって、イベントをバインドするこの方法では、ブラウザーの互換性の問題に対処する必要があります。
イベントをバインドするための次のコードは、互換性のために処理されており、すべてのブラウザーでサポートできます。
1 function addEvent（obj、type、handle）{
2
3 try {// Chrome、FireFox、Opera、Safari、IE9.0以降
4
5 obj.addEventListener（type、handle、false）;
6
7} catch（e） {
8
9試み{// IE8.0以下
10
11 obj.attachEvent（+型、ハンドル'に'）;
12
13}キャッチ（E）{//初期ブラウザ
14
15 OBJ [+型'に'] =ハンドル;
16
17}
18
19}
20
21}
ここでは、ブラウザのエラープロンプトを回避するために、if ... else ...ステートメントの代わりにtry {...} catch（e）{...}が使用されています。
たとえば、イベントをid = "demo"のボタンにバインドするには、マウスをクリックするとダイアログボックスがポップアップします。
1 var obj = document.getElementById（ "demo"）;
2 addEvent（obj、 "click"、myAlert）;
3
4 function myAlert（）{
5
6 alert（ "I am a dialog box"）;
7
8}
jQueryイベントバインディングとJavaScriptイベントバインディングの違い
jQueryのイベントバインディングは重ね合わせることができ、JavaScriptのイベントバインディングはオーバーライドできます。
サンプルコードを見てください：
1 / * jQuery绑定事件* /
2 $（ " 。cnd "）。click（function（）{
3 console.log（ "first"）}
4）;
5 $（ "。cnd"）。click（function（）{
6 console.log（ "second"）}
7）;
8
9 $（ "。cnd"）。click（function（）{
10 console.log（ "3rd"）}
11）;
12
13 / * js绑定事件* /
14 var cm2 = document.getElementById（ "me2"）;
15cm2.οnclick= function（）{
16 console.log（ "first"）;
17};
18cm2.οnclick= function（）{
19 console.log（ "second"）;
20};
21cm2。
οnclick= function（）{ 22 console.log（ "3rd"）;
23};
jQueryの.cndクリックイベントを実行すると、コンソールは次のように出力します。
jsのcm2クリックイベントを実行します。コンソールは次のように出力します。
それは見つけることができます：
jQueryのイベントバインディングメソッドを使用して、3つの処理関数が同じ要素のクリックイベントにバインドされ、結果が順番に出力されます。これは、jQueryのイベント処理関数が重ね合わされていることを示しています。
JavaScriptのネイティブイベントバインディングを使用すると、最後に同じバインディングイベントのみが実行され、後でバインドされたイベントハンドラー関数が前のイベントハンドラー関数を上書きすることがわかります。