35

好奇心から-jQueryの目的/ユースケースはtriggerHandler何ですか? 私が知る限り、 と の間の唯一の「実際の」違いは、ネイティブ イベントが発生するかどうかと、イベントのバブリング動作です (ただし、triggerのバブリング動作は、さらに数行のコードで複製するのは難しくないようです)。 . ネイティブ イベントが発生しないようにする利点は何ですか?triggerHandlertriggerHandlertrigger

これが便利な関数なのか、それとももっと深い理由があるのか​​、また、いつ、どのような理由で使用するのか、興味があります。

4

4 に答える 4

70

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

.triggerHandler() メソッドは、次の例外を除いて、.trigger() と同様に動作します。

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

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

  • .trigger() は jQuery オブジェクトに一致するすべての要素に作用しますが、.triggerHandler() は最初に一致した要素にのみ影響します。

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

  • .triggerHandler() で作成されたイベントは、DOM 階層をバブルアップしません。ターゲット要素によって直接処理されない場合、何もしません。

伝播を防ぎます。うまくいけば、これについて説明する必要はありません...

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

これも自明のはずです...

于 2010-09-22T18:39:42.897 に答える
4

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

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

  • 内部にある別のコンポーネントの「ロード」(一般的なものの例) をトリガーしたいコンポーネント。

    その場合、親の 'load' が来たときに子の 'load' を呼び出している場合、event.stopPropagation がリスナーによって呼び出されないと無限呼び出しが発生するため、これを実行したくありません。 'load' イベント (バブルが原因):

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

その場合、triggerHandler() を呼び出す必要があります。

于 2014-01-09T13:55:34.857 に答える
3

違い 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 階層をバブルアップしません。ターゲット要素によって直接処理されない場合、何もしません。

于 2015-04-16T12:02:04.430 に答える