1

イベントリスナーを追加する場合、ドキュメントレベルで追加する必要がありますか、それともドキュメントツリーのさらに下に追加する必要がありますか？

たとえば、の入力class="ExampleCss"は常に。のdivに含まれることを知っているとしid="ExampleDiv"ます。使用する必要があります：

$('#ExampleDiv').on(...);

また

$(document).on(...);？

このために知っておくべきベストプラクティスはありますか？

前もって感謝します。

4

3 に答える 3

1

より具体的なセレクターを使用することをお勧めします。このように委任する場合、jQueryはDOMツリーを下って、委任セレクターに一致するすべての子孫を見つける必要があります。明らかdocumentに、最も多くの子孫がいます。

より具体的なセレクターを使用することもより明確になり、起こりうる間違いを防ぎます（.ExampleCssこのイベントをトリガーしたくない場合）。

より具体的なセレクターを使用することの唯一の欠点は、後で委任するクラスの祖先を変更しなければならない可能性があることです。

于 2013-01-17T22:08:51.207 に答える
0

IDやクラス名でセレクターを使用することをお勧めします。jqueryがすべてのDOMを処理するための余分な時間の無駄を排除するだけでなく、混乱を排除し、コードを保守可能に保ちます...

于 2013-01-17T22:34:50.097 に答える
0

直接イベントコールバック$(".aClass").on("click",function(){});は要素に直接アタッチされるため、イベントが発生した場合、そのコールバックを直接呼び出すことができます。

委任されたイベントコールバック$(element).on("click",".aClass", function() {});の場合、イベントのイベントコールバックはに添付されelementます。イベントコールバックがアタッチされた時点では、selectorパラメータは保存されているだけであり、jqueryはその時点で一致する要素の検索を行いません。このセレクターは、要素がイベントを受信したとき（直接またはイベントがdomをバブリングしているとき）にのみ使用されます。次に、jqueryは、イベントの発生元である要素がセレクターと一致するかどうかをチェックします。

そのため、このセレクターはできるだけシンプルに保つ必要があります。最初のjQueryは、イベントの発生元である要素に2番目のクラスがあるかどうかを確認するだけでよいため、のテストは.on("click", ".aClass", ...)はるかに高速に実行できます。jQueryは他の条件もテストする必要があります。それが、可能な限り具体的にすることです。.on("click", ".foo div .bar .aClass", ...).aClass

、、およびめったに発生しないその他のイベントの場合、パフォーマンスへの影響に気付くことはありませclickんmousedown。のようにmouseup短い間隔で呼び出されるイベントの場合、デリゲートを使用するのはおそらく最善ではありません。各イベントで、起点である要素がセレクターと一致するかどうかをjqueryでテストする必要があるためです。（ルートとして使用）keypressmousemoveelement

言及すべきもう1つの重要なことは、すべてのイベントがDOMをバブリングしているわけではないということです。たとえば、バブリングのある要素とバブリングしていない要素のイベントscroll（少なくともクロムではない）。その他のイベントも、特定のブラウザまたはブラウザバージョンでバブルしないことが知られています。これらのイベントでは、デリゲートを使用することはできません。overflow: scrolloverflow: auto

だから、より良い選択は何ですか、まあそれは答えるのは簡単ではありません。デリゲートを使用していて、明確な場所でそれらを宣言しない場合、どの要素にコールバックがあるかを見つけるのが難しい場合があります。一方、DOMから要素を追加または削除することが多い非常に動的なページがある場合は、デリゲートを使用する方がはるかに簡単です。これは、必要なすべてのイベントコールバックが添付されていることに注意する必要がないためです。新しく追加された要素に。

直接およびデリゲートを使用する場合は、コールバックが呼び出される順序にも特別なものがあります。とを追加し$(".aClass").on("click", ...)、ユーザーが最初に直接接続されたコールバック$(document).on("click",".aClass", ...)を持つ要素をクリックすると、接続された場所、次に接続された順序で呼び出されます。.aClass一致するデリゲートコールバックがアタッチされている順序で呼び出される場合、イベントはそのイベントをリッスンする次の要素までバブリングしています。その後、イベントはドキュメントに到達するまでバブリングを続けます。

于 2013-01-18T09:43:00.740 に答える