2017-01-10 2 views
0

jQueryを使用するSPAで作業していますが、入力フィールド(チェックボックス、ドロップダウン、テキスト)の特定の値に対してアクションをトリガーする必要があります。私は、ページ上の非同期操作があるだろうことを考えると、第二の選択肢は何か、速い以下厄介jQueryを使用してフォーム内のすべての入力フィールドをリッスンします。

$('input, select').on('click focus change', function(e){ 
//do something 
}); 

または

$('form').on('click focus change', 'input, select', function(e){ 
//do something 
}); 

もあり、次のパフォーマンスの観点から知りたいです私は向いていますが、私はあなたに専門家に確認したかったのです。

+2

最初は少しオーバーヘッドがありますが、あまり重要ではありません。第2の利点は、ロード時にページ上にあるものだけでなく、動的に作成されたフィールドでも機能することです。 – nurdyguy

答えて

1

2番目のスニペットは、フォーム全体にイベントを添付します。ユーザーが何かをクリック/フォーカス/変更すると(特にクリック)、イベントが発生します。それが発生するとすぐに、それは入力または選択で完了したかどうかを確認し、失敗した場合は中断します。その結果、第2のバージョンは、非入力/選択イベントに対して時には起動するため、わずかに高いオーバーヘッドを持ちます。

第2の形式の主な利点は、動的に作成される要素にあります。ユーザーが何かを実行すると、フォームに追加のフィールドが作成されます。ページが最初にロードされたときにそのフィールドがページになかった場合、そのフィールドが変更/クリックされると、イベントの最初のバージョンは起動しません。しかし、第2のバージョンになります。

私の説明:私が記述したように動的なフィールドで具体的に何かをしているのでない限り、最初のものを使用します。正直なところ、どちらかというと小さな違いがあります。

+0

説明をありがとう! – ultimatecoder

1

パフォーマンス面では、家に書き込むことはあまりありません。その差異(もしあれば)は無視できる。非同期操作の場合は、2番目のスニペットに進むことをお勧めします。

関連する問題