web-dev-qa-db-ja.com

イベント委任で複数のセレクターを使用するjQuery.on（）？

JQuery1.7で.on()を使用していて、ページに挿入された要素に対して一度に複数のセレクターをアタッチできるかどうか疑問に思いました。以前はlive()を使用していましたが、パフォーマンスが向上したため、移動したい理由は明らかです。

.on()を次のように使用できますか。

$(document).on('click', '#selector1, #selector2, .class1', function () { 
     //stuff
});

また、ドキュメントに添付することで失われるメリットはありますか？

？

jquerydelegateslive
22
Andy

  1. 次のような方法で.on（）を使用できますか？

    _$(document).on('click', '#selector1, #selector2, .class1', function () { 
    //stuff
});
_

    はい、それでうまくいきます。

  2. パフォーマンスが向上したので、live()の代わりにこれを使用したいと思います。

    live()自体がバインドするため、live()を使用するのではなく、そのコードスニペットを使用することにはnoのパフォーマンス上の利点があります。ドキュメントへのイベント、およびjQuery 1.7では、ライブは舞台裏でonを呼び出します。

  3. また、ドキュメントに添付することで失われるメリットはありますか？

    documentにバインドすることの欠点は、イベントが処理される前に、祖先のリスト全体をトラバースする必要があることです。これ、 jQueryのドキュメントで指摘されているように は、可能な限り最も遅いルートです。イベントのソースに近い要素にハンドラーをアタッチすることで、イベントをより早く処理することをお勧めします。

23
Matt

それは可能であり、「これ」はクリックされたセレクターであり、ドキュメントではありません。

セレクターの最も近い親要素にアタッチすることをお勧めします。 '＃selector1'をクリックすると、イベントはイベントハンドラー要素（ヒアドキュメント）に移動します。

レイヤーが多いほど、アクションも多くなります。さらに、selector1とdocumentの間に別のクリックイベントハンドラーがある場合、それはevent.stopPropagation();でインターセプトされ、「document」イベントハンドラーに到達することはありません。

不正なイベント「インターセプト」を確認できます このフィドルで 。

1
roselan