53

jqueryでクリックイベントを処理するためのいくつかの方法に出くわしました。

練る：

$('#mydiv').bind('click', function() {
    ...
});

クリック：

$('#mydiv').click(function() {
   ...
}

の上：

$('mydiv').on('click', function() {
   ...
}

2つの質問：

  1. 彼らはこれを行う他の方法はありますか？
  2. どちらを使用する必要がありますか、またその理由は何ですか？

アップデート：

eveyoneが参考に提案したように、私はドキュメントをもっとよく読んで、次のように使用する必要があることがわかりました。

on（）またはclick（）、

事実上同じものです。

しかし、バインドが推奨されなくなった理由を誰も説明していませんか？私はおそらくどこかで明白なものを逃したことでより多くの反対票を得るでしょう、しかし私はこれの理由を文書で見つけることができません。

UPDATE2：

'on'には、動的に作成された要素にイベントハンドラーを追加できるという便利な効果があります。例えば

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

このコードは、クラスが「myClass」の要素にクリックハンドラーを追加します。ただし、後でさらにmyClass要素が動的に追加されると、明示的に'on'を呼び出さなくても、クリックハンドラーも自動的に取得されます。人々が言っ​​ていることから、これもより効率的です（以下のSimonsの回答を参照）。

4

3 に答える 3

40

bindおよびのドキュメントからclick：

バインド：

jQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨されるメソッドです。

ソースは、この関数が短くなることなくbind、より柔軟な関数を呼び出すだけなので、使用する理由がないことを明らかにしています。on

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

したがって、jQueryチームと同様に、bind現在は役に立たない古い関数を忘れることをお勧めします。それがまだここにあるのは、古いコードとの互換性のためだけです。

クリック：

このメソッドは、.on（'click'、handler）のショートカットです。

もちろん、このショートカットは関数よりも強力で柔軟性onがなく、委任はできませんが、適用時に、より短く、おそらく少し読みやすいコードを記述できます。onその点については意見が分かれています。一部の開発者は、これは単なるショートカットであり、委任を使用したらすぐに置き換える必要があるという事実もあるため、回避する必要があると主張してonいます。

于 2013-03-27T12:00:06.707 に答える
15

最初の質問に対して： jQuery 1.7の時点で.delegate置き換えられたものも.onありますが、それでもバインディングイベントハンドラーの有効な形式です。

2番目の質問：ドキュメントにあるように常に使用する必要がありますが、オブジェクト自体またはより高いレベルの要素にイベントハンドラーをバインドして、のように委任できるため、.on使用方法にも注意を払う必要があります。.on.delegate

リストがul > liあり、マウスオーバーイベントをにバインドするとしliます。現在、2つの方法があります。

  • $('ul li').on('mouseover', function() {});
  • $('ul').on('mouseover', 'li', function() {});

2つ目は、イベントハンドラーがul要素に一度バインドされ、jQueryがevent.currentTarget（jQuery API）を介して実際のターゲットアイテムを取得するのに対し、最初の例ではすべてのリスト要素にバインドするため、2つ目が望ましいです。このソリューションは、実行時にDOMに追加されるリストアイテムに対しても機能します。

これはparent > child要素に対してのみ機能するわけではありません。ページ上のすべてのアンカーにクリックハンドラーがある場合は、イベントハンドラーをすべての要素にアタッチする時間を大幅に節約するのでは$(document.body).on('click', 'a', function() {});なく、使用する必要があります。$('a').on('click', function() {});

于 2013-03-27T12:17:56.993 に答える
5

この質問を投稿する前に、 jqueryのドキュメントを検索する必要があったと思います：

jQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨されるメソッドです。

于 2013-03-27T12:04:18.847 に答える