1

AJAX による作成時に、特定のクラスの各要素に個別のイベント ハンドラーを割り当てていました。

$('#newId').on('click', function (e) {...

次のように、すべての要素に適用されるクラスのハンドラーを 1 つに変更しました。

$('#container').on('click', '.myClass', function (e) {...

ハンドラーが起動されたときにこれがどのように機能するか、およびパフォーマンスにどのような影響があるかについて疑問に思っていました。すなわち、...

要素はどのくらい正確にクラス ハンドラーを見つけますか? これは、要素ごとに 1 つのハンドラーを持つよりも遅いですか? クラスのイベント ハンドラーは本当に 1 つしかないのでしょうか、それともクラス内の要素ごとに何らかの形で再現されるのでしょうか?

4

1 に答える 1

1

コメントで述べたように、各アプローチには利点と欠点があります。

イベント委任は通常、子要素が行き来するコンテナがある場合に適しています。編集/削除ボタンを備えた大きな順序付けられていないリストを考えてみてください。削除ボタンをクリックすると、その親 li が削除される可能性が高くなります。イベントの委譲がなければ、これらの要素にバインドされているイベント ハンドラーのバインドを解除する必要があります。

イベント委任は、DOM のイベント バブリング プロパティを使用します。クリック イベントが #container の子でトリガーされると、そのイベントはノード ツリーをバブル アップさせ、途中でイベントのハンドラーを検索します。次に、イベント ターゲットがテストされ、セレクターと一致するかどうかが確認されます。その場合、バインドされたクリック ハンドラーが呼び出されます。jQuery がなければ、これは次のようになります...

function myclass_click_handler() {
    // an element with myClass has been called
}

document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.className.indexOf('myClass') > -1) {
        myclass_click_handler();
    }
});

イベント委任の欠点の 1 つは、すべてのイベントで機能しないことです。パフォーマンスの観点からは、メモリ リークの可能性が少なくなるため、実際にパフォーマンスを向上させることができます。

クラスに基づいて要素にコールバックを直接割り当てると、各要素はコールバック関数への参照を取得します。これらの要素をいくつでも削除する必要がある場合は、それらの要素のイベント ハンドラーをバインド解除する必要があります。バインドされたイベント ハンドラーを削除して remove() メソッドを使用すると、jQuery がこれに役立ちます。

お役に立てれば！

于 2012-06-09T02:29:40.460 に答える