2011-09-23 2 views
7

jQueryの ".triggerHandler()"メカニズムは、 ".trigger()"とは異なり、 jQueryオブジェクトが呼び出されます。言い換えれば、複数の要素が選択されている場合のjQuery ".triggerHandler()"と ".trigger()"の比較

$('.all-over-the-page').triggerHandler("readjust"); 

は、そのクラスとページ上の多くの要素があっても、クラスで最初の要素「オールオーバーザページ」の「再調整」のハンドラを呼び出します。一方、 ".trigger()"メソッドは、すべてに影響します。

私は ".each()"を使ってこれを回避することができます(または私の代わりに自分の代わりに書きます)が、この点で2つの理由が異なる理由についていくつかの根拠がありますか?それは私には意味がない。 (私はそれがほぼ確実になりました変更することができないことはもちろん理解しています。)を明確にする

編集:私はコンテキストを提供する場合

をそれは私がこの上で、私の頭を悩まてる理由を理解する方が簡単でしょう私は実際に持っているコードのスタイルで。ページにさまざまな「ウィジェット」機能のコードをまとめると、多くの場合イベントハンドラが必要になります。良い例は、関連性がチェックボックス、ラジオボタン、セレクタによって制御されるいくつかのフィールドを持つ、ある種のフォームです。その一般的な例は、「e-commerceサイト」に表示される「配送先住所」チェックボックスです。このチェックボックスをオンにすると、配送先住所が無効になり、請求先住所が使用されます。

他のコードは、チェックボックスコントロールウィジェットとはまったく独立しているため、実際にはチェックボックスの設定をプログラムで更新することを含む可能性があります。その場合、そのウィジェットの他のコードでは、「triggerHandler()」を使用してウィジェットを通知したい場合があります。「私はいくつかのものを更新したので、現在のステータスを再確認し、必要に応じて調整します。

したがって、もし「.triggerHandler()は、」私は使用することができ、選択したすべての要素を操作します:

$theForm.find('input, select, textarea').triggerHandler('change'); 
をし、すべてのそれらのハンドラが実行され、彼らが必要とするものは何でも行うことができます。私が言ったように、書くのは簡単です:

$theForm.find('input, select, textarea').each(function() { 
    $(this).triggerHandler('change'); 
}); 
+0

+1良い質問Pointy –

+0

ここで具体的に何をしようとしているのか分かりません。あなたが解決しようとしていることの文脈をもう少し分かりますか? –

+0

説明文を追加して更新しました。 – Pointy

答えて

11

「...いくつかの根拠は、2つのこの点で異なっている理由のためにあるのでしょうか?」

私はアイデアがtriggerHandler()が、それは他の関数であったかのようにあなたは、ハンドラとしての機能を呼び出す方法であることを意味するということだと思います。

triggerHandler()このように、関数は1回だけ呼び出され、関数の実際の戻り値が返され、バブリングまたはデフォルト動作のDOMには影響しません。

もちろん、thisの値をDOM要素以外の値に変更すると、関数が壊れてしまう可能性があるので、最初にマッチした要素だけを使用します。

あなたの関数を使いたいなら、おそらくそれを参照して直接呼び出すか、または.each()の引数として呼び出すだけです。

$('.element').each(handler_func); 

... eventオブジェクトを必要としない限り。


EDIT:あなたが呼び出しから返された値が必要な場合はまたは、代わりに.map()を使用します。

var return_values = $('.element').map(handler_func); 

EDIT:更新された質問に提供される例に関して良い解決策はtrigger()[docs]メソッドのの能力のextraParametersを利用することかもしれませんハンドラにpreventDefault()stopPropagation()と伝えることができます。 .trigger()ドキュメントから

$('.elememts').bind('click', function(e, was_code_triggered) { 

    if(was_code_triggered) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    // your code 
}); 


// ... 


$('.elememts').trigger('click', true); // pass "true" to let handler know 
             // it wasn't a DOM event 

は、「我々は.bind()方法にここに渡し、EVENTDATAパラメータしている余分なパラメータの違いに注意してください両方に情報を渡すためのメカニズムです。 extraParameters引数を.trigger()に設定すると、イベントがトリガーされたときに情報が確認される、eventData引数が.bind()になると情報が必要になりますハンドラがバインドされた時点ですでに計算されています。

+0

まあまあ、値を返すことができると期待しているイベントハンドラを書くのは私のようなものです。そして、私はデフォルトの振る舞いをしないでOKです。それは実際にはチェックボックス(例えば)の「クリック」に問題があります。 – Pointy

+0

@Pointy:はい、あなたがスタンドアロンの関数として有用な関数とハンドラを持っていなければ、それは変です。そのケースはまれだと思います。あなたがトリガーハンドラーを使用していたのは、それが無効なバブリングでしたか?編集:ちょうどあなたの質問の更新に気づいた。読んで... – user113716

+2

@ Pointy:あなたが何をしているのか分かります。もしあなたが '.each()'(直接関数を渡すのか、 'triggerHandler()'を使うのか)を望まないなら、 '.trigger()'の* extraParameters *ハンドラに 'preventDefault()'と 'stopPropagation()'を通知するフラグを渡します。 – user113716