[解決済み] jQuery の `click`, `bind`, `live`, `delegate`, `trigger`, `on` 関数の違い (例付き)?

質問内容

の各関数のドキュメントを読みました。 jQuery official website の各関数のドキュメントを読みましたが、以下の関数間の比較表はありません。

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

参照リンクは避けてください。

上記の機能は具体的にどのように動作し、どのような場面でどれが優先されるのでしょうか？

注意してください。 もし、同じような機能・仕組みを持つ機能が他にあれば、詳しく教えてください。

更新情報

また $.trigger という関数もあります。それは上記の関数と同様に機能するのでしょうか？

その他の更新

現在 .on が追加され v1.7 が追加され、これで何とか上記の機能要件は全てカバーできるのではないかと思います。

どのように解決するのですか？

これを読む前に はこのイベントのリストを別のページに引っ張ってきて、API自体がとてつもなく便利で、私が以下で議論していることはすべてこのページから直接リンクされています。 .

まず .click(function) のショートカットで、文字通り .bind('click', function) の短縮形であり、同等です。 ハンドラをバインドする際に使用する 要素に直接 に直接結合する場合に使います。

$(document).click(function() {
  alert("You clicked somewhere in the page, it bubbled to document");
});

この要素が置き換えられたり捨てられたりすると、このハンドラは存在しなくなる。 また、そこになかった要素 このコードが実行されたとき が実行されたときに存在しなかった要素 (例えばセレクタがそのときに見つけたもの) もハンドラを取得しません。

.live() そして .delegate() も同様に関連しています。 .delegate() は、実際には .live() を内部で使っていますが、どちらもバブル化するイベントを待ち受けています。 これは新しい要素でも古い要素でも動作します で、これらは同じようにイベントをバブル化します。 例えば、新しい行やリスト項目を追加するなど、要素が変更される可能性があるときにこれらを使用します。 もし、ページ内に留まり、どの時点でも置き換えられないような親/共通の祖先がない場合は、次のように使用します。 .live() のような、このようにします。

$(".clickAlert").live('click', function() {
  alert("A click happened");
});

しかし、置き換えられない親要素がある場合 (つまり、そのイベントハンドラがバイバイしていない場合)、それを .delegate() で、このように処理します。

$("#commonParent").delegate('.clickAlert', 'click', function() {
  alert("A click happened, it was captured at #commonParent and this alert ran");
});

とほぼ同じ働きをします。 .live() とほぼ同じ動作をしますが、イベントが捕捉されハンドラが実行されるまでのバブルの回数は少なくなります。 これらのメソッドのもうひとつの一般的な使用法は、要素上でクラスが変更され、元々使用していたセレクタにマッチしなくなった場合です。 イベントの際に で評価され、一致すればハンドラが実行されます。つまり、セレクタに一致しなくなった要素は、もう実行されないのです。 とは .click() の場合、イベントハンドラは DOM 要素に直接バインドされ、セレクタにマッチしないことは関係ありません。 .unbind() .

もうひとつの一般的な使用法は .live() と .delegate() は パフォーマンス . もし、あなたが扱っている たくさん を扱う場合、各要素に直接クリックハンドラをアタッチするのは高価で時間がかかります。 このようなケースでは シングル ハンドラをセットアップし、バブリングに仕事をさせる方が経済的です。 それが大きな違いを生んだこの質問を見てください。 というものです。

トリガ - 更新された質問に対して

イベントハンドラのトリガには、主に2つの機能があります。 これらは API で同じ "Event Handler Attachment" のカテゴリに分類されます。 これらは .trigger() そして .triggerHandler() . .trigger('eventName') には、例えば一般的なイベントのためのいくつかのショートカットが組み込まれています。

$().click(fn); //binds an event handler to the click event
$().click();   //fires all click event handlers for this element, in order bound

これらのショートカットを含む一覧は、こちらからご覧いただけます。 .

違いとしては .trigger() はイベントハンドラをトリガーします（ただし、ほとんどの場合デフォルトのアクションではなく、例えばカーソルがクリックされた <textarea> ). イベント ハンドラをバインドされた順に発生させ (ネイティブ イベントと同じように)、ネイティブ イベント アクションを起動し、DOM をバブルアップします。

.triggerHandler() は通常別の目的で使用されます。ここでは、バインドされたハンドラを起動しようとしているだけで、フォームを送信するなどのネイティブイベントを起動することはありません。 また、DOM 上にバブルアップすることもなく、連鎖することもありません（そのイベントに対する最後にバインドされたイベントハンドラが返すものを返します）。 たとえば focus イベントを発生させたいが、実際にはオブジェクトにフォーカスを当てない場合、単に .focus(fn) でバインドしたコードを実行させたいだけです。 .trigger() はそれを行うだけでなく、実際に要素にフォーカスを当て、バブルアップします。

以下は実際の例です。

$("form").submit(); //actually calling `.trigger('submit');`

これは任意のサブミットハンドラ、例えば jQuery バリデーションプラグイン を実行し、次に <form> . しかし、もし だけ で接続されているので、検証を行いたいだけなら submit イベントハンドラでフックされているため、検証したかっただけであり <form> を送信しないのであれば .triggerHandler('submit') というように、このように

$("form").triggerHandler('submit');

プラグインは、バリデーションチェックが通らなかった場合にハンドラが爆死してフォームを送信できないようにしていますが、この方法では、ハンドラがどうなっても気にしません。 アボートされたかどうかは、私たちは を試しているわけではありません。 をしようとしているわけではなく、ただバリデーションをやり直させたいだけなのです。 ( 免責事項です。 があるので、これは余分な例です。 .validate() メソッドがあるので、これは余計な例ですが、意図の適切な説明にはなります)