1

たくさんの要素を持つ 2 つのビューを含む Web プロジェクトをアップグレードしています。

この時点で、すべての要素には、Web ページのレンダリング中に 1 つずつ定義される、mouseenter、mouseleave、click などの複数のイベントがあります。

私の質問は、次のようなイベントマップと動的セレクターを使用して、最後のJQueryメソッド.on()を使用する方が効率的ですか?

$("#main-container").on({
    mouseenter: function (event) {    
       //Do stuff
    },            
    mouseleave: function (event) {
       //Do stuff     
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".cartridge"
);

現在のイベント宣言よりも:

$('[id^="cartridge"]').each(function(index) {       
    $(this).click(function(){
        //Do stuff
    }); 
    $(this).mouseenter(function(){
        //Do stuff
    }); 
    $(this).mouseleave(function(){
        //Do stuff
    }); 
});
4

1 に答える 1

2

.on() の jquery API によると、 #main-container にアタッチされたイベントが 1 つだけで、別の .cartridge からのイベントがこのコンテナーに「バブルアップ」するだけでよいため、より効率的です。

jquery API から:

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。tbody に 1,000 行を含むデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素 (tbody) のみにアタッチし、イベントは 1 レベル (クリックされた tr から tbody まで) バブルアップするだけで済みます。

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

http://api.jquery.com/on/「直接および委任されたイベント」を参照してください

于 2012-09-18T06:32:51.027 に答える