javascript - jQuery でのイベント バインディング

Question

次の間に違いはありますか: (例1を避ける理由はありますか?)

1：

$("#stuff").on("resize", function() { doThis(); });
$("#stuff").on("resize", function() { doThat(); });

二：

$("#stuff").on("resize", function() { 
  doThis(); 
  doThat();
});

Answer 1

2 番目の例でdoThis()は、例外がスローされた場合doThat()は実行されません。最初の例ではそうではありません。

Answer 2

率直に言って、実際の違いはありません。

実際のコードでは、

• コード内の異なる場所に 2 つのハンドラーをアタッチする必要がある場合があります。その場合、バージョン 1 (または同様のもの) を使用する必要があります。
• ハンドラーを選択的にデタッチする機能が必要な場合があります。その場合、次のようにイベントに名前空間を付けることができます。

ハンドラーをアタッチします。

$("#stuff").on("resize.A", function() { doThis(); });
...
$("#stuff").on("resize.B", function() { doThat(); });

ハンドラーを 1 つ切り離します。

$("#stuff").off("resize.A");

のハンドラーresize.Bはアタッチされたままになります (つまりdoThis()、呼び出されませんが、呼び出さdoThat()れます)。

Answer 3

唯一の違いは、2 つの異なるイベント ハンドラー関数が格納されて実行され、2 番目のスニペットが 1 つで満たされることです。

計算してみましょう。2 番目のスニペットの方がエレガントです。パフォーマンスについては触れませんが、「数百」のメソッドをそのようにバインドする場合、複数のハンドラーをバインドしたくないことは明らかです。

Answer 4

2 つ目はもう少しパフォーマンスが向上します。

最初の例では、サイズ変更イベントが発生したときに、(doThis および doThat の呼び出しに加えて) 2 つの関数呼び出しのオーバーヘッドがあります。2 番目の例では、呼び出されるイベント ハンドラは 1 つだけです。