web-dev-qa-db-ja.com

triggerHandlerとjQueryのトリガー

好奇心から-jQueryのtriggerHandlerの目的/ユースケースは何ですか？私が知る限り、triggerとtriggerHandlerの唯一の「実際の」違いは、ネイティブイベントが発生するかどうか、およびイベントバブリング動作です（ただし、triggerHandlerのバブリング動作は数行のコードでtriggerを使用して複製するのは難しくないと思われます）。ネイティブイベントが発生しないようにする利点は何ですか？

これが便利な機能であるか、それが存在するより深い理由があるのか​​、そしてなぜ/いつそれを使用するのか興味があります。

jqueryeventsjavascript-eventsjquery-triggerjquery-triggerhandler
31
David Eads

http://api.jquery.com/triggerHandler/ のドキュメントから

.triggerHandler（）メソッドの動作は.trigger（）と同じですが、次の点が異なります。

  • .triggerHandler（）メソッドは、イベントのデフォルトの動作（フォームの送信など）を発生させません。

デフォルトのブラウザーアクションを妨げないことで、フォーカスや選択などで発生する、スタイルを適用するアクションを指定できます。 JavaScriptベースの動的メニューがあるので、CSSだけでスタイルを適用したくない場合は、JavaScriptが無効になっていると、レイアウトが奇妙に見える理由がわかりません。 $('menu1select').triggerHandler('click');のようなものを使用できます

  • .trigger（）はjQueryオブジェクトによって一致したすべての要素を操作しますが、.triggerHandler（）は最初に一致した要素にのみ影響します。

たとえば、onclick要素を非表示にするイベントがあり、各要素を指定する代わりに、その関数を一般的に呼び出したい場合は、$('.menu').triggerHandler('click');を使用できます。

  • .triggerHandler（）で作成されたイベントは、DOM階層を浮き上がらせません。それらがターゲット要素によって直接処理されない場合、それらは何もしません。

伝播を防ぎます。残念ながら、これを説明する必要はありません...

  • （連鎖を可能にするために）jQueryオブジェクトを返す代わりに、.triggerHandler（）は、実行を引き起こした最後のハンドラーによって返された値を返します。ハンドラーがトリガーされない場合、未定義を返します

これも自明です...

67
Robert

ネイティブイベントが発生しないようにする利点は何ですか？

  • 「フォーカス」イベントにバインドされたアクションがありますが、ブラウザが実際にフォーカスすることを望まない場合があります（馬鹿げているように見えるかもしれませんが、それは発生する可能性がありますね）。現在のフォーカス）。

  • 作成しているコンポーネントが、その内部にある別のコンポーネントの「ロード」（単なる一般的なものの例）をトリガーしたい。

    その場合、親の「ロード」が来たときに子の「ロード」を呼び出す場合、event.stopPropagationが以下のリスナーによって呼び出されない場合に無限呼び出しが発生するため、これを実行する必要はありません。 'load'イベント（バブリングにより発生）：

$container.on('load', function () {
    $somethingInsideContainer.trigger('load'); 
    // Would cause a loop if no event.stopPropagation() is called
});

その場合は、triggerHandler（）を呼び出す必要があります。

2
Micaël Félix

違い1：トリガーを使用して、JQueryオブジェクトに一致するすべての要素を呼び出すことができます。

//トリガーの例1。トリガーを使用すると、3つのボタンクリックイベントがすべて発生します。 //トリガーメソッドをtriggerHandler（）で置き換えてみてください。最初のボタン要素のイベントハンドラのみが起動することがわかります。

<button id = "button1">button1</button>
<button id = "button2">button2</button>
<button id = "button3">button3</button>

$("#button1").on("click", function(){
alert("button1 clicked");
});
$("#button2").on("click", function(){
alert("button2 clicked");
});
$("#button3").on("click", function(){
alert("button3 clicked");
});

//トリガーをtriggerHandlerに置き換えて違いを確認します

$("#button1, #button2, #button3").trigger("click");

違い2：要素イベントにtriggerHandler（）を使用する場合、その要素のネイティブイベントは呼び出されません。 trigger（）は正常に動作します。

//例：

//トリガーをtriggerHandlerに置き換えて違いを確認します

 <button id = "button1">button1</button>
  <button id = "button2">button2</button>

$("#button1").on("click", function(){
 $("#button2").trigger('click');

});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");

});

違い3： trigger（）はJqueryオブジェクトを返しますが、triggerHandler（）は最後のハンドル値を返します。または、ハンドラーがトリガーされていない場合は、未定義を返します

//例3

<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>


$("#button1").on("click", function(){
var myValue = $("#button2").trigger('click');
    alert(myValue);
});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");
    return true;
});

その他の違いは

TriggerHandler（）でトリガーされたイベントは、DOM階層を浮き上がらせません。それらがターゲット要素によって直接処理されない場合、それらは何もしません。

1
maxspan

私にとっての主な違いは、「triggerHandler」は最後のハンドラーによって返されたものを返すのに対し、「trigger」はjQueryオブジェクトを返すことです。

したがって、次のようなハンドラの場合：

  $( document ).on( 'testevent', function ()
  {
    return false;
  });

'triggerHandler'を使用すると、次のことができます。

  if( $( document ).triggerHandler( 'testevent' ) === false )
  {
    return;
  }

したがって、ハンドラーから返された結果に応答する場合は、 'triggerHandler'を使用します。

0
Steve Roberts