0

.on()その要素がDOMに存在しない場合、jQueryでイベントが発生するとどうなりますか?

たとえば、これを使用すると：

$(document).on('click', "#registerFormSubmit", function(){
   // do something here
});

そして、私は#registerFormSubmitすべてのページに存在しているわけではありません.コードによってブラウザの速度が低下していますか?それともそうではありませんか?

では、なぜ私はとにかくこれをしているのですか？

javascript コードを 10 個の .js ファイルに分割し、どのページで必要なファイルに応じてそれぞれを含めたくありません。1 つのファイルにある場合、サーバー/ブラウザーはデータをはるかに高速に送信すると信じているためです (特に、ファイルは難読化および縮小されています)。

要素を含まないページでもコードの速度が低下する場合、すべてのコードを 1 つのファイルに保持するための次の解決策は適切でしょうか?

var page = window.location.pathname.split('/');
if (page[1] == 'contact'){
   $(document).on('click', "#registerFormSubmit", function(){
      // do something here
   });
}

イベントは、DOM 内にある要素、または将来 DOM 内にある要素の.on()イベント ハンドラー関数をアタッチすることに注意してください。したがって、要素が現時点で存在しなくても、ブラウザーの速度が低下すると思います。

ただし、if (page)ページが一致しない場合、提案されたソリューションではイベントを添付しないでください。

誰でもこれに光を当てることができますか？

4

1 に答える 1

0

ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントで委任されたイベントを過度に使用しdocumentたり、委任したイベントを使用したりしないでください。document.body

tag#id.classjQuery は、委任されたイベントをフィルタリングするために使用される場合、フォームの単純なセレクターを非常に迅速に処理できます。したがって、"#myForm"、"a.external"、および"button"はすべて高速セレクターです。より複雑なセレクター、特に階層セレクターを使用する委譲イベントは、数倍遅くなる可能性がありますが、ほとんどのアプリケーションでは十分な速さです。多くの場合、階層セレクターは、ハンドラーをドキュメント内のより適切なポイントに接続するだけで回避できます。たとえば、代わり$("body").on("click", "#commentForm .addNew", addComment)に$("#commentForm").on("click", ".addNew", addComment).

ソース: http://api.jquery.com/on/

代わりに上記の形式を使用することをお勧めします$(document).on('click', "#registerFormSubmit")。すべてのページでクリックイベントを使用しない場合、簡単な答えはdon't put it in all .jsfiles です。必要なファイルのみをロードし、クリック イベントを別のファイル.jsで処理します。registerFormSubmit.js

于 2013-09-15T19:13:25.133 に答える