2011-12-26 3 views
1

jQueryの関数の混乱を招くような異なるイベントバブリングの振る舞いを具体的に説明するサンプルJavaScriptプログラムを作成しました。clickdelegateおよびlivejQueryを使用してイベントのバブリングを行うという点で、「クリック」、「委任」、「ライブ」の動作が異なるのはなぜですか?

ここにはdemo pageがあります。各機能について

ラッパーとクリックイベント機能に登録されている両方ともラッパーでクリックリンクがあります。

は私が

  1. live
  2. delegateイベントバブルを防ぐことはできませんlivedelegatestopPropagationを使用していることがわかり、ラッパーでクリックイベントが最初に解雇し、次のクリックリンクされます。ただし、click機能ではこの順序が逆になります。

誰もこの2つの現象を説明できますか?

サンプルではjQuery 1.6.4を使用していますが、バージョンを調整できます。

+0

jQueryの:彼らは、イベントがルートまたは新しく追加された要素がこの周りの詳細ビューのためにこのブログのエントリを参照するために、それが実行される特定の子から親に泡時になるようにイベントバブルの使用を作りますdoco for .'live() '](http://api.jquery.com/live/)と[' .delegate() '](http://api.jquery.com/delegate/)はこれを説明しています。あなたは質問を投稿する前にドコを見ますか? – nnnnnn

+0

私は試しましたが、理解するのが少し難しいと感じました... – xiaohan2012

答えて

2

開始するには、live is deprecatedonとし、jQuery 1.7+ではdelegateを使用します。後でなく、liveの使用を中止します。上にリンクされたドキュメントは実際には非常に有益であり、これらの関数がどのように機能するかを説明する素晴らしい仕事をしています。

代議員と生存者の両方がバブリングに依存しています。クリックとの違いは次のとおりです。イベントはそれらに泡立ちました。デリゲートは特定の親を監視するように指示するので、ライブより優れていますが、ライブはドキュメントレベルまで泡立てています。非常に高価です。

jQueryのドキュメントはここに引用する価値がある:

彼らは文書の先頭を に伝播したら.live()メソッドは、イベントを処理するので、 ライブイベントの伝播を停止することはできません。同様に、.delegate()によって処理されるイベントは、委任先の要素に を伝播します。 にバインドされているイベントハンドラは、委譲されたイベントハンドラが呼び出されるまでに、すでに に実行されています。したがって、これらのハンドラ は、delegatedハンドラが event.stopPropagation()を呼び出すかfalseを返してトリガするのを防ぐことができます。

1

ライブとデリゲートの実装を理解している場合は、この違いの理由がわかります。ライブやデリゲートは、バインド時には要素がルートまたは特定の親のいずれかに、したがってその違いに関連付けられていないため、要素には割り当てられません。[

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

関連する問題