216

新しい関数について話している2つのすばらしい記事を見つけました.on()jquery4u.comelijahmanor.com

.bind()それでも使用する方が良い方法はあり.on()ますか?

たとえば、次のようなサンプルコードがあります。

$("#container").click( function( e ) {} )

セレクターによって取得されたアイテムは1つだけであり、私の場合、ページがロードされたときに<div>名前が既に存在していることに注意してください。#container動的に追加されません。私がjQueryの最新バージョンである1.7.2を使用していることに言及することが重要です。

そのサンプルでは、​​関数によって提供される他の機能を使用しない場合でも、.on()代わりに使用する必要がありますか?.bind().on()

4

6 に答える 6

326

内部的には、現在のバージョンのjQueryに.bind直接マップされます。.on(同じことが当てはまります。)したがって、代わりに.live使用した場合、パフォーマンスはわずかですが実質的に重要ではありません。.bind

ただし、.bind将来のバージョンからいつでも削除される可能性があります。使い続ける理由はなく、代わり.bindに好むすべての理由があり.onます。

于 2012-08-07T13:26:35.457 に答える
59

これらのスニペットはすべてまったく同じことを実行します。

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

ただし、これらはすべて同じことを実行するこれらとは大きく異なります。

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

イベントハンドラーの2番目のセットは、イベント委任を使用し、動的に追加された要素に対して機能します。委任を使用するイベントハンドラーも、はるかにパフォーマンスが高くなります。最初のセットは動的に追加された要素では機能せず、パフォーマンスが大幅に低下します。

jQueryのon()関数は、まだ存在していなかった新しい機能を導入しません。これは、jQueryでのイベント処理を標準化するための試みにすぎません(ライブ、バインド、または委任のいずれかを決定する必要はありません)。

于 2012-08-07T13:29:46.773 に答える
11

直接メソッドと.delegateは優れたAPIで.onあり、非推奨にする意図はありません。

コードの型指定が少なくなるため、直接メソッドの方が適しています。サイレントバグではなく、イベント名を誤って入力すると、すぐにエラーが発生します。私の意見では、書き込みと読み取りも簡単clickです。on("click"

は、引数の順序のために.delegate優れています。.on

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

あなたはすぐにそれが委任されていることを知っています、なぜならそれは委任と言っているからです。また、すぐにセレクターが表示されます。

.on委任されているかどうかはすぐにはわかりません。セレクターの最後を確認する必要があります。

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

さて、の命名.bindは本当にひどいものであり、額面価格は。よりも悪いです.on。ただし、.delegate委任されていないイベントを実行することはできず、直接メソッドを持たないイベントがあるため、このようなまれなケースでは、委任されたイベントと委任されていないイベントを明確に分離するためにのみ使用できます。

于 2012-08-07T13:42:59.140 に答える
8

ソースコードを見ると、$.fn.bindそれは単なるリライト関数であることがわかりますon

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

于 2012-08-07T13:28:37.713 に答える
6

jQueryのドキュメントから:

jQuery 1.7以降、.on()メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨されるメソッドです。以前のバージョンでは、.bind()メソッドを使用して、イベントハンドラーを要素に直接アタッチしていました。ハンドラーはjQueryオブジェクトで現在選択されている要素にアタッチされているため、これらの要素は.bind()の呼び出しが発生した時点で存在している必要があります。より柔軟なイベントバインディングについては、.on()または.delegate()のイベント委任の説明を参照してください。

http://api.jquery.com/bind/

于 2012-08-07T13:27:19.960 に答える
4

Jquery 3.0以降では、.bindは非推奨になり、代わりに.onを使用することを好みます。@Blazemongerが以前に答えたように、それは削除される可能性があり、確実に削除されるでしょう。古いバージョンの場合、.bindは内部で.onも呼び出し、それらの間に違いはありません。詳細については、APIも参照してください。

.bind()のjQueryAPIドキュメント

于 2016-12-01T21:18:23.073 に答える