web-dev-qa-db-ja.com

jQueryの.bind（）と.on（）

私は新しい関数.on()について話している2つの素晴らしい記事を見つけました： jquery4u.com 、 elijahmanor.com 。

.bind()が.on()よりもまだ使用に適している方法はありますか？

たとえば、私はこのように見えるサンプルコードがあります：

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

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

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

javascriptjqueryjquery-selectors
193
Samuel

内部的には、.bindは、現在のバージョンのjQueryでは.onに直接マッピングされています。 （同じことが.liveにも当てはまります。）そのため、代わりに.bindを使用すると、パフォーマンスはほとんど低下しますが、実際にはわずかなものになります。

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

300
Blazemonger

これらの断片はすべてまったく同じ動作をします。

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のイベント処理を標準化するための試みです（ライブ、バインド、デリゲートのいずれを決定する必要もなくなりました）。

53
jbabey

Directメソッドと.delegateは.onより優れたAPIであり、それらを廃止する意図はありません。

あなたのコードはより少ない文字列でタイプされるので直接法が好ましいです。サイレントバグではなくイベント名を誤って入力すると、すぐにエラーが発生します。私の意見ではon("click"より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は非代行イベントを実行できず、直接メソッドを持たないイベントもあります。そのため、このようなイベントを使用することはできますが、代行イベントと非代行イベントを明確に区別したいからです。

10
Esailija

$.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

8
andlrc

JQueryのドキュメントから：

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

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

6
Faust

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

.bind（）のjQuery APIドキュメント

3
userG