2

以前、私はこのソリューションを使用していました。

$('<div class="ok" />')
.appendTo('body');

$('div.ok')
.live('click',function(){ alert(); })

今私はこれを使用します：

$('<div class="ok" />')
.appendTo('body')
.click(function(){ alert(); })

パフォーマンスの違いはどうですか？live（）を必要としないため、2番目のソリューションの方が優れていると思います。それは常にこのようになっていますか（多くの要素もあります）？なぜ？

4

2 に答える 2

1

パフォーマンスの違いはどうですか？

さて、あなたが使用していたときlive。live常にバインドされ、documentイベントがバブリングするのを防ぐことも不可能でした。イベントは、すでにバブリングされた後にトリガーされたためです。

その意味でlive()は、パフォーマンスはあまり良くありませんでした。

2番目のコードサンプルは、作成時にオブジェクトに直接バインドされるため、と比較してパフォーマンスが向上し、柔軟性が高まりlive()ます。これで、イベントがバブリングするのを防ぐことができます。

を使用する場合と比較して、作成時にイベントを要素に直接on()バインドします。バインドする最も近い静的要素を指定しても、パフォーマンス上のメリットはごくわずかです。

// Performs slightly better than on() but cannot be executed from anywhere unless the element is added at the same time.
$('<div class="ok" />').appendTo('body').click(function(){ alert(); })

ただし、この利点は、たとえば一般的なメソッドで要素が追加される前にイベントハンドラーをバインドできるという利点よりも小さくなります。

以下は2番目のコードサンプルと同じですが、一般的なメソッド内でうまく実行でき、動的要素の追加の一部である必要はありません。

// Can be called in a common init method for example and still work.
$(body).on('click', '.ok', function(){ alert();})

on()要素の追加をイベントのバインドから分離できるという大きな利点があります。

于 2012-12-02T00:53:00.360 に答える
0

div.ok2番目の方法では、DOMを再度検索する必要がないため、パフォーマンスが大幅に向上する可能性が高くなります（DOMに大量の要素がドロップされていない場合）。別のオプションは、html/props代わりに署名を使用することです。

$("<div>", { 
    'class': "ok",
    'click': function () {
        alert("You clicked the new element!");
    } 
}).appendTo("body");

デモ： http： //jsfiddle.net/w4Tj3/

.live()これは非推奨であることに注意してください。イベント委任を使用する場合は、これ以降を使用することをお勧めします.on()。ただし、あなたの場合、必ずしもどちらも必要ではありません。代わりに、模倣するには、 ：.live()にリスナーを設定します。document

$(document).on("click", ".ok", function () {
    alert("You clicked an .ok element!");
});

これが機能する方法は、イベントのバブリング動作を活用することです。要素をクリックすると、クリックによってDOMが上に移動し、最終的にdocumentオブジェクトに到達します。次に、jQueryは、クリックを開始した要素がセレクター（）と一致するかどうかを確認し、一致する.ok場合は無名関数を実行します。

パフォーマンスを向上させるには、にバインドするdocumentのではなく、動的に追加された要素にはるかに近いものにバインドします。たとえば、li要素を動的に追加する場合は、その親olまたはにバインドしulます。このように、イベントは処理される前に伝播する必要はありません。

clickイベントの委任を設定すると、動的に追加されたロジックからロジックを削除できdivます。

$("<div>", {'class': 'ok'}).appendTo("body");
于 2012-12-02T00:52:38.357 に答える