web-dev-qa-db-ja.com

$（document）.on（ 'click'、 '#id'、function（）{}）vs $（ '＃id'）。on（ 'click'、function（）{}）

私はの違いが何であるかを見つけようとしていました

$(document).on('click', '#id', function(){});

そして

$('#id').on('click', function(){});

2つの間に違いがあるかどうか、もしそうならその違いは何かについての情報を見つけることができませんでした。

何か違いがあれば、誰か説明してもらえますか？

jquerysyntax
79
Styphon

最初の例は、イベント委任を示しています。イベントハンドラーは、DOMツリーの上位の要素（この場合はdocument）にバインドされ、セレクターに一致する要素から発生したイベントがその要素に到達すると実行されます。

これは、ほとんどのDOMイベントバブル Originからツリーを上るので可能です。 #id要素をクリックすると、すべての祖先要素を介してバブルするクリックイベントが生成されます（サイドノート：実際にはこの前に「キャプチャフェーズ」と呼ばれるフェーズがあり、イベントがツリーを下ってターゲットに到達したとき）。これらの祖先のイベントをキャプチャできます。

2番目の例では、イベントハンドラーを要素に直接バインドします。イベントは（ハンドラーでそれを防止しない限り）引き続きバブルしますが、ハンドラーはターゲットにバインドされているため、このプロセスの効果は表示されません。

イベントハンドラーを委任することにより、バインド時にDOMに存在しなかった要素に対してイベントハンドラーが実行されることを保証できます。 2番目の例の後に#id要素が作成された場合、ハンドラーは実行されません。実行時にDOMに確実に存在することがわかっている要素にバインドすることにより、ハンドラーが実際に何かにアタッチされ、後で必要に応じて実行できるようになります。

64
James Allardice

次のコードを検討してください

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

さて、ここに違いがあります

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

さて、myTaskを再び追加するとどうなりますか？

$('#myTask').append('<li>Answer this question on SO</li>');

このmyTaskアイテムをクリックしても、イベントハンドラがバインドされていないため、リストから削除されません。代わりに.onを使用した場合、新しいアイテムは、私たちの側で余分な労力なしで機能します。 .onバージョンの外観は次のとおりです。

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

概要：

.on()と.click()の違いは、.click()イベントに関連付けられたDOM要素が後の時点で.click()に動的に追加されると、.on()が機能しない場合があることです。 _は、.on()呼び出しに関連付けられたDOM要素が後で動的に生成される場合に使用できます。

12
Bhushan Firake