2

10 個のサブ要素を持つ要素があります。それぞれがclickイベントを処理する必要があります。10 個のサブ要素は、親へのクリックの伝達を停止します。この時点で、同じ親要素のインスタンスの追加を開始し、イベント ハンドラーをリアルタイムでアタッチする必要があります。

click親のイベントを1つだけにして、どのサブ要素がクリックされたかを確認する方が良いのではないでしょうか。ifハンドラーには、さまざまな関数を呼び出す10 個のステートメントがあります。これは、ブラウザがイベントをアタッチするためのより効率的な方法だと思います。

ベストプラクティスは何ですか?

4

3 に答える 3

2

すべてのクリック ハンドラーに共通点のない完全に個別のコードがある場合は、システムにイベントをディスパッチさせる場合と、自分でイベントをディスパッチする場合を比較しているだけです。通常、動的要素がない限り、システムにそれらをディスパッチさせる方が簡単でパフォーマンスが高くなります。動的要素がある場合は、委任されたイベント処理の利点を利用して、新しいイベント ハンドラーを作成するたびに新しいイベント ハンドラーをアタッチする必要がないようにすることができます。サブ要素。

ただし、クリック ハンドラーに重要な共通コードがある場合、または各イベント ハンドラーを共通コードと非共通コードに分割できる場合は、共通コードを 1 か所で実行してから分岐する 1 つのクリック ハンドラーを使用する方が効率的です。より具体的なコードのために。

ワン マスター クリック ハンドラーで、ノードごとに 1 つの分岐を持つ巨大な switch ステートメントまたは巨大な if/else ステートメントを実装することになった場合、おそらく間違った方向に進んでいます。コードの大部分が一般的で、非常に効率的な分岐方法 (ジャイアントswitchやif/elseブロックなし) がある場合、または動的要素の委任イベント処理の利点が必要な場合にのみ、1 つのマスター クリック ハンドラーを使用します。

要約すると、次の場合はシングル マスター クリック ハンドラーを使用します。

  1. 動的要素を処理するには、委任されたイベント処理の利点が必要です。
  2. thisすべてのクリック ハンドラは同じであるか、参照を使用して同じコードに組み込むことができます.data()。
  3. switchクリック ハンドラーはほとんど同じであり、巨大なステートメントや巨大なif/elseツリーを使用せずに、個別のコードを効率的に分岐できます。

これらのいずれにも当てはまらない場合 (たとえば、クリック ハンドラーは通常すべて個別であり、要素は動的ではありません)、システムを別のクリック ハンドラーにディスパッチさせ、共通のコードを共通の関数に分割して、それぞれの個別のイベント ハンドラーから呼び出すことができるようにします。各イベント ハンドラでコードを繰り返さないようにします。

于 2013-06-13T22:41:39.050 に答える
1

各サブ要素のクラスを関数にマップするオブジェクトを作成する関数を作成し (単一の親要素内で一意である各サブ要素にクラスを割り当てると仮定します)、その配列をループして関数をアタッチします。クリックイベントに。このようなもの：

function createEventHandlers(yourarguments) {
   return {
     'subelement1': function(e) { alert("1 was clicked with arguments" + yourarguments); },
     'subelement2': function(e) { alert("2 was clicked with arguments" + yourarguments); },
     //...
   };
}

function setSubElementClickHandlers(element, arguments) {
   var eventHandlers = createEventHandlers(arguments);
   for(cls in eventHandlers) {
       $(element).children('.' + cls).click(eventHandlers[cls]);
   }
}
于 2013-06-13T22:23:27.623 に答える