3

jQuery を使用して複数のイベントを同じ要素にアタッチする必要がある場合.on()、すべてのイベントを 1 つの呼び出しに結合し、それらを使用して区別する必要がありevent.typeますか? .on()または、イベントごとに個別の呼び出しを行う必要がありますか?

複合イベント:

$('#main').on('mouseenter mouseleave click', '.myElement', function(event) {
    if (event.type == 'click') {
       return false;

    } else if (event.type == 'mouseenter') {
        $(this).addClass('active');

    } else if (event.type == 'mouseleave') {
        $(this).removeClass('active');
    }
}

個別のイベント:

$('#main').on('click', '.myElement', function(event) {
   return false;
}

$('#main').on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');
}

$('#main').on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
}

どれが一番速いですか？

[編集] 追加の詳細:明らかに 2 つの側面を考慮する必要があります。最初の側面は、ページの読み込みが完了し、これらのイベント ハンドラーが設定されているとき.on()です。ただし、2番目の側面は、これらのイベントが実際にトリガーされるときです。マウスオーバーまたはクリック.myElementが何度も発生するため、より重要であると信じていますが、.on()呼び出しは1回だけ呼び出されます（DOMが変更された場合は複数回呼び出されますが、それでもイベント自体より少ない）。

4

3 に答える 3

4

バインド イベント(イベントにコールバックをアタッチする) と、トリガーされたイベントを実際に処理する(コールバックの呼び出し/実行) を区別する必要があります。前者はページごとに 1 回だけ発生する可能性がありますが、後者はユーザーのアクティビティに応じて数百回発生する可能性があります。

  • ドキュメントの準備ができたとき (最終的に)、および DOM が変更されるたびに (たとえば Ajax Complete で)イベントバインディングのみを考慮する場合、.on()1 つのコールバックで 1 つの呼び出しのみを使用する方が高速です: http://jsperf.com/複数の jquery イベント/2

  • トリガーされるイベントの処理(つまり、ユーザーのクリックまたはマウスオーバー)を考慮する場合.myElement、すべてのイベントを 1 つのコールバックに結合し、それらをifステートメントで区別する方が、複数のコールバックを使用するよりも高速です: http://jsperf.com/複数の jquery イベント/4

以下は、両方のテストを組み合わせた結果です。

バインドするのが最速で、イベントを処理するのも最速です:

$('#main').on('mouseenter mouseleave click', '.myElement', function(event) {

    // Processing of the triggered event:
    if (event.type == 'click') {
        return false;

    } else if (event.type == 'mouseenter') {
        $(this).addClass('active');

    } else if (event.type == 'mouseleave') {
        $(this).removeClass('active');
    }
});

上記のコードは、推奨される構文です。次の例は情報提供のみを目的としています。

バインドが約 30% 遅くなり、イベントの処理が 50% 遅くなります。

$('#main').on('click', '.myElement', function(event) {
    return false;
});

$('#main').on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');
});

$('#main').on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
});

バインドが最も遅く、イベントの処理が 70% 遅くなります。

$('#main').on({
    mouseenter: function() {
        $(this).addClass('active');
    },
    mouseleave: function() {
        $(this).removeClass('active');
    },
    click: function() {
        return false;
    }
}, '.myElement');

バインドが約 25% 遅くなり、イベントの処理が最も遅くなります。

$('#main').on('click', '.myElement', function(event) {
    return false;
});

$('#main').on('hover', '.myElement', function(event) {
    $(this).addClass('active');
}, function() {
    $(this).removeClass('active');
});

バインドが約 20% 遅くなり、イベントの処理が 60% 遅くなります。

$('#main').on('click', '.myElement', function(event) {
    return false;

}).on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');

}).on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
});
于 2013-06-21T22:50:59.223 に答える