4

ページ内の現在および将来の要素を操作できるようにする jQuery のメソッドの背後にあるものは何delegate()ですか?live()

4

3 に答える 3

2

jQuery Live() メソッドとイベントのバブリング

于 2010-12-20T07:40:59.477 に答える
1

jQuery.live()と.delegate()メソッドは、イベントが DOM ツリーを「バブリング」するという原則に基づいて機能します。簡単に聞こえるかもしれませんが、実際はとても簡単です。のような DOM 構造を持つ

<html>
    <body>
        <div>
            <span>Foobar</span>
        </div>
    </body>
 </html>

たとえば、クリックがspan発生した場合、ブラウザはevent handlersそのスパンノードにバインドされているかどうかを確認します。もしそうなら、彼らは解雇されます。これらのイベント ハンドラーが呼び出された を停止しない場合event propagation、イベントはバブルアップしています。つまり、ブラウザーは、親div nodeにアタッチされた のイベント ハンドラーがあるかどうかなどを確認clickします...

バブルが発生している間はいつでも、イベント ハンドラーは呼び出されたメソッドを呼び出して、.stopPropagation()このイベントがそれ以上バブルしないようにすることができます。

これで、 jQuery の.live()メソッドはイベント ハンドラー (「クリック」など) を常に<body>要素にバインドします。つまりclick、ページのどこかで発生するイベント (他のすべてのノードは の子であるためdocument.body) は<body>、呼び出し中にノードが既に存在する.live()か後で追加されるかに関係なく、 にバブリングされます。

この.delegate()方法はさらに一歩進んでいます。非常に巨大で深い DOM 構造を扱っている場合、各イベントを完全なツリーにバブルアップさせるのは、パフォーマンスの点でコストがかかるように思えます (そして、実際にそうです!)。.delegate()新しく作成されたノードの共通の親ノードを指定できます。たとえば、新しいノードを追加する順序付けられていないリストでデッドリングしている場合、liそのノードに任意のイベント ハンドラーをアタッチするだけで十分<ul>です。すべてのliノードは子であるため、それらのイベントはバブルアップしています。

于 2010-12-20T08:13:41.217 に答える
0

delegateおよびイベントは、発生する特定の要素ではなくlive、親要素または要素に接続されます。body

たとえば、要素をクリックすると、クリック イベントは要素の親にバブリングし、それを処理する onclick ハンドラーが存在するまでさらに body 要素に向かいます。クリック イベントをフックするために使用する場合live、イベントが発生した要素が指定したセレクターと一致するかどうかを確認する body 要素にイベントがバブルアップするまで待機します。

于 2010-12-20T08:26:05.453 に答える