jQueryのイベントバインドとイベント依頼

     jQuery      ，   on()、bind()、live()、 delegate()     ，             ，      ，    ，    。

参照ドキュメント:http://blog.csdn.net/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://www.jb51.net/article/67166.htm http://api.jquery.com/on/ http://api.jquery.com/delegate/ http://api.jquery.com/bind/ http://api.jquery.com/live/ http://www.cnblogs.com/aaronjs/p/3481075.html http://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
DOMツリー
まずDOMツリーを植えて、次にお話しするイベントの泡を説明します.画像は以下のように引用されています.http://blog.csdn.net/xxd851116/article/details/8646899
DOMを操作する文脈ではdocumentはルートノードである.
イベントバブル
このセクションの内容は次のとおりです.http://blog.csdn.net/xxd851116/article/details/8646899
aリンクをクリックすると、リンク要素のクリックイベントがトリガーされます.このイベントは、その要素にバインドされたすべてのクリックイベントの関数の実行を開始します.これがイベントトリガーです.
次のコードでは、ユーザーが操作をクリックするとalert関数の実行がトリガーされます.

$('a').bind('click', function() { alert("That tickles!") });  

このイベントトリガプロセスは、以下のように画像で表され、画像は以下のように参照される.http://blog.csdn.net/xxd851116/article/details/8646899
上図が実行されると、clickイベントはツリーのルート方向に伝播し、親要素にブロードキャストされ、各レベルの祖先要素であり、その子孫要素のクリックイベントがトリガーされると、イベントがそれに渡されます.これがイベントバブルです.
全体のプロセスは下図のように、画像は以下のように参照されます.http://blog.csdn.net/xxd851116/article/details/8646899
公式の説明
イベントバブルの概念を理解し,jQueryのイベントバインドとイベント依頼(イベントエージェントにもなる)の説明に本格的に入る.
まずjQueryの公式サイトでこの4つの方法について説明します.
live():jQuery1.7以降は破棄(この方法はここでは説明しない):bind():動的に追加された要素はこの方法でイベントdelegate():jQuery 1をバインドできない.7以降on():jQuery 1にon()で置換.7以降に導入され、イベントバインドのすべての機能をサポートします.
また、jQueryの公式サイトで説明されている点は、
In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.(参照先:http://api.jquery.com/on/‘Direct and delegated events’)
翻訳すると、
IE 8および以前のバージョンでは、change、submitなどの少数のイベントはオリジナルのイベントバブルをサポートしていなかったが、jQueryはイベントバブルをシミュレートし、ブラウザ間で一貫した動作を作成した.
すなわち、jQueryはすべてのイベントバブルをシミュレートし、すべてのイベントをイベントバブルをサポートし、すべてのブラウザと互換性を持たせる.
bind
bind()の使い方
bind()の使い方は以下の通りです.

//      
$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});
//      
$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

Bind()に存在する問題
bind()の問題を見ることができるコードで説明します

$("div").bind("click", function () {
     alert($(this).text());
 })

このコードの役割は、htmlドキュメント全体をスキャンしてすべての$(‘div’)要素を見つけ、alert関数を各要素のclickイベントにバインドすることです.
このコードからbind()には次のような問題があることがわかります.

    1、         ，              ，      100 div  ，      100 。        ，      。     id   ，  id  ， bind()       。
    2、bind()                    ，                    。
    3、      on()   bind()

delegate
上記bind()の最初の2つの問題はdelegateで解決できる.
delegate()の使い方
delegate()の使い方は次のとおりです.

$('#container').delegate('a', 'click', function() { alert("That tickles!") }); 

このコードの役割は、ドキュメントをスキャンして$(‘#container’)を検索し、clickイベントと'a'というCSSセレクタを使用してパラメータとしてalert関数を$(‘#container’)にバインドすることです.イベントが$(‘#container’)にバブルされると、イベントがclickイベントであるかどうか、およびイベントのターゲット要素がCCSセレクタ(すなわち、’a’要素)と一致しているかどうかを確認します.両方のチェックの結果が本物であれば、関数を実行します.
delegate()の特徴

    1、          （"a"）、  （"click"）      “   ”$("#container")  ，       、        、    ；
    2、      ，    $("table").find("#info").delegate(...)        ；
    3、       ，                     .stopPropagation()       ，          。

bind()ではなくdelegate()を使用する理由
1.DOMにまだ存在しない可能性のあるDOM要素にプロセッサを付加するため.bindは、各要素にプロセッサを直接バインドするため、ページにまだ存在しない要素にプロセッサをバインドすることはできません.
2、もしあなたが$(‘a’)を実行したら.bind(...)をクリックすると、新しいリンクがAJAX経由でページに追加され、あなたのbindプロセッサはこれらの新しいリンクに対して無効になります.一方delegateは別の祖先ノードにバインドされるため、現在または将来その祖先要素内に存在する要素に対して有効である.
3、またはプロセッサを単一の要素またはグループの要素に追加するために、同じ関数をDOMの100の要素に1つずつ追加するのではなく、子孫要素のイベントをリスニングします.ページ内のすべての要素に直接プロセッサを追加するのではなく、1つの(またはグループ)の祖先要素にプロセッサを追加することは、パフォーマンス上のメリットをもたらします.
(参照先:http://blog.csdn.net/xxd851116/article/details/8646899)
on
jQueryのソースコード(私が見たバージョンは1.12.4)を表示することで、bind()でもdelegate()でもon()メソッドで実現されていることがわかりますが、パラメータが異なるだけです.以下の図:
on()の公式APIは以下のように記述されている.

.on( events [, selector ] [, data ][, handler])

公式サイトはjQuery 1.7から、できるだけon()メソッドを使用してイベントをバインドし、delegate()またはbind()メソッドを使用する必要はありません.
直接バインドとイベント委任
私たちは直接公式サイトの直接バインドとイベント依頼の紹介を見ています.
ほとんどのブラウザのイベントバブルは、ドキュメントの最も深い、最も内層からイベントが発生する要素(event targetとも呼ばれるイベントターゲット)であり、bodyまたはdocument要素に上向きに到達します.IE 8および以前のバージョンでは、change、submitなどの少数のイベントはオリジナルのイベントバブルをサポートしていなかったが、jQueryはブラウザ間で一貫したイベントバブル動作をシミュレートし、作成した.
      
on()メソッドのselectorパラメータが空である場合、イベントハンドラは直接バインドと呼ばれる.このプロセッサは、バインドされた要素(以下の例でバインドされたdocument要素、訳者注)にイベントが発生するたびに、このイベントがこの要素上で発生しても、内層要素から泡が出ても呼び出されます.
さらに、on()メソッドのselectorパラメータが空の場合、bind()メソッドと同じです.ページの既存の要素のイベントのみをバインドできます.
直接バインドとは何かをコードで説明します.

<body>
<div>
            div
        <button>  button>
div>
<script type="text/javascript">
        $(function(){
            // click     document   ，
            //          click      document       
            //          
            //          document，                 
            $(document).on("click",function(e){
               console.log(e.target.tagName + " is clicked")
            })  
        })
    script>
body>

ページの実行効果は下図のようです:
on()メソッドのselectorパラメータが空でなければ、イベントハンドラは依頼と呼ばれる.このプログラムは、バインドされた要素(以下の例ではdocumentにバインドされ、訳者注)にイベントが直接発生すると呼び出されず、セレクタに一致する内部要素(以下の例ではclickイベントがbuttonで発生し、訳者注)にイベントが発生する場合にのみ呼び出されます.
      
jQueryのイベント依頼は、イベントの発生者(event target)からイベントハンドラがバインドされている要素(例えば、最内層要素から最外層要素まで)までイベントを上へ泡立て、泡の「沿道」過程で一致するセレクタのためにイベントハンドラを実行することである.
次に、依頼とは何かをコードで説明します.

<body>
    <div>
            div
        <button>  button>
    div>
    <script type="text/javascript">
        $(function(){
            // click     document   ，
            //          ：selector
            //      document   ，     target，
            //         （   button）  ，              ，     。
            $(document).on("click","button",function(e){
                console.log(e.target.tagName + " is clicked")
            })
        })
    script>
    body>

面実行効果は下図:
イベントハンドラは、on()メソッドを呼び出すときにすでに存在する必要がある(前例のdocument要素、訳者注など)現在選択されている要素にのみバインドされます.bind()と同じです.
これらの要素がすでに存在し、選択されていることを確認するには、コードをに配置します.