web-dev-qa-db-ja.com

jQuery-イベントリスナーをいつバインドするか？

JQueryを使用して、中規模の「単一ページ」のJavaScriptアプリケーションを構築しています。アプリケーションのすべての可能な機能を含める場合、134のclickバインディングがあります。

ほとんどのコンテンツは動的に読み込まれるため、これを行うことはできません。

$(element).click(function() { ... });

代わりに、私はこれをやっています：

$(document).on('click', selector, function() { ... });

現在、これらすべてを$(document).readyにバインドしています。しかし、それは悪い習慣ですか？これは速度の問題ですか？

代わりに、コンテンツが読み込まれるたびにイベントリスナーをバインドすることもできます。次に例を示します。

$('#content').html(...);
$('#newcontent').click(function() { ... });

その問題は、整理するのが難しいことです。何かアドバイスはありますか？

javascriptjqueryevent-programming
4
musicnothing

イベントをターゲットに近づけると、パフォーマンスがわずかに向上します。これで、ドキュメント内のすべての要素が「セレクタ」と一致するかどうかを確認するためにチェックされています。たとえば、ページが次のように構成されているとします。

<div id="container">
   <div id="content">...</div>
</div>

あなたは書き直した方がいいでしょう

$(document).on('click', selector, function() { ... });

なので

$("#container").on('click', selector, function() { ... });

イベントを再アタッチする必要がないのと同じ便利さを実現できますが、アクションイベントは「#container」に制限されます。 $（document）にイベントをアタッチする際に考慮すべきもう1つの点は、同じアイテムを使用してページの別の場所に新しいアイテムを追加する場合、不要な動作が発生することを心配する必要がないことです。

5
user12415

私はあなたがそれを（onを使用して）優先する方法でやっていると信じています。

$（document）.ready ...で実際の作業は行われていません。「ドキュメントにバブリングしている子要素からのクリックイベントにバインドしてください」と言っているだけです。

パフォーマンスの観点からは、セレクターが効率的であることを確認します。

ドキュメント（ http://api.jquery.com/on/ ）は、<body>ドキュメントではなくレベルですが、それは無視できるかもしれません。

1
Dave Clausen

実際に最善の方法は、アプリケーションの詳細によって異なり、各アプリケーションの詳細によって異なります。

単一のアプリケーションのロジックに従う方が簡単だと思います。

$(top).on('click', selector, function() { ... });

アプリケーションのさまざまな部分が担当するページの部分を更新するときにハンドラーを追加することを発見する必要はありません。 topではなくdocumentを使用していることに注意してください。（user12415が指摘したように）document自体ではなく、必要なだけ幅の広い要素を使用する方が良いためです。 。

場合によっては、委任を使用するのではなく、要素自体に直接ハンドラーを追加しようとすると、パフォーマンスが大幅に低下したり、パーツ間で必要以上に強い結合が必要になることがあります。デリゲートを使用してハイパーリンクのすべてのクリックイベントを処理する編集アプリケーションがあります。このアプリケーションには、基本機能を提供する編集コアがありますが、編集するデータに応じてモードを使用して編集動作を変更します。たとえば、モードは、WordのすべてのインスタンスをWikipediaの同じWordへのハイパーリンクに変換する機能を提供できます。コアは、モードがドキュメントをどのように変更するかを予測できません。したがって、委任がないと、コアはevery変換をチェックして、コストのかかるハイパーリンクが追加されたかどうかを確認する必要があります。モードでは、テキストが入力されているときにプレーンテキストをハイパーリンクに変換できます。つまり、これはキーストロークごとのチェックを実行することを意味します。非常に高価です！あるいは、モードは、コアが気にする何かをドキュメントに追加したことをコアに伝える方法を持っている必要があります。これはエラーが発生しやすいです。 （ "おっと！コアを伝えるのを忘れた。"）委任はここでは正気なオプションです。

1
Louis