triggerHandler vs Trigger in jQuery

Question

Aus Neugier - was ist der Zweck von/Use Cases für jQuery triggerHandler? Soweit ich sagen kann, die einzigen "echten" Unterschiede zwischen trigger und triggerHandler ist, ob das native Ereignis ausgelöst wird, und Ereignis Sprudeln Verhalten (obwohl triggerHandler sprudelnden Verhalten scheint nicht schwer zu replizieren mit trigger in ein paar mehr Zeilen von Code). Welchen Vorteil bietet es, sicherzustellen, dass das native Ereignis nicht ausgelöst wird?

Ich bin neugierig, ob dies eine Komfortfunktion ist oder es gibt einen tieferen Grund, warum es existiert, und was warum/wann ich es benutzen würde.

Answer 1

Aus dem Text & Tabellen in http://api.jquery.com/triggerHandler/

Die .triggerHandler() Methode verhält sich ähnlich (), um .trigger mit den folgenden Ausnahmen:

• Die .triggerHandler() -Methode nicht Das Standardverhalten eines -Ereignisses wird ausgelöst (z. B. ein Formular ).

nicht verhindern, dass die Standard-Browser Aktionen können Sie eine Aktion angeben, die auf Fokus oder wählen auftritt, etc etc etc, die einen Stil gilt. Vielleicht haben Sie ein dynamisches Menü, das auf Javascript basiert, so dass Sie den Stil nicht nur mit CSS anwenden möchten, da andere mit deaktiviertem JavaScript nicht verstehen, warum das Layout seltsam aussieht. Sie so etwas wie $('menu1select').triggerHandler('click');

• Während .trigger verwenden können() auf alle Elemente durch die jQuery Objekt abgestimmt arbeiten wird, .triggerHandler() wirkt sich nur auf das erste verglichene Element.

Wenn Sie eine Veranstaltung haben, die zum Beispiel Onclick ein Element versteckt, und Sie wollen in der Regel, dass die Funktion aufzurufen, statt jedes Element angeben zu müssen, können Sie $('.menu').triggerHandler('click') verwenden;

• Events mit .triggerHandler erstellt() dies nicht tun sprudeln die DOM-Hierarchie; Wenn sie nicht direkt vom Zielelement verarbeitet werden, tun sie nichts.

Ausbreitung verhindert, hopyfully müssen diese eine nicht erklären ...

• Anstatt das jQuery-Objekt zurückzugeben, (damit Chaining) .triggerHandler() zurückkehrt was auch immer Wert wurde vom letzten Handler zurückgegeben, der ausgeführt wurde. Wenn keine Handler ausgelöst werden, gibt es undefined

Diese sollte man selbst als auch erklärend sein ...

Answer 2

Was hat den Vorteil, dass das native Ereignis nicht ausgelöst wird?

• Sie haben Aktionen gebunden an einen ‚Fokus‘ Ereignis, aber Sie wollen nicht der Browser wirklich zu konzentrieren, konzentrieren sie (vielleicht dumm erscheinen, aber es könnte passieren, könnte es nicht? Wie ein Code, Sie möchten einmal ausführen, ohne den aktuellen Fokus zu verlieren).

• Eine Komponente, die Sie erstellen, möchte 'load' (nur ein Beispiel für eine generische Sache) einer anderen Komponente auslösen, die darin enthalten ist. Wenn Sie "load" von Kindern aufrufen, wenn "load" des übergeordneten Elements kommt, möchten Sie dies nicht tun, da dies zu einem unendlichen Aufruf führen würde, wenn die event.stopPropagation nicht aufgerufen wird von den Hörern von 'Last' Ereignis (verursacht durch bubling):

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

In diesem Fall rufen Sie müssen triggerHandler().

Answer 3

Unterschied 1: Sie können alle Elemente, die vom JQuery-Objekt abgeglichen werden, mit Trigger aufrufen.

// Beispiel1 für Trigger. Alle 3 Button-Klick-Ereignisse werden ausgelöst, wenn der Trigger verwendet wird. // Versuchen Sie, die Triggermethode durch triggerHandler() zu ersetzen. Sie werden sehen, dass nur der erste Button-Element-Event-Handler ausgelöst wird.

<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"); 
}); 

// Ersatz-Trigger mit triggerHandler um zu sehen, den Unterschied

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

Unterschied 2: wenn triggerHandler() für ein Element Ereignis verwenden, das native Ereignis wird nicht für dieses Element aufgerufen werden. trigger() funktioniert einwandfrei.

// Beispiel:

// Ersatz-Trigger mit triggerHandler den Unterschied

<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"); 

}); 

Difference 3 zu sehen: Trigger() return Jquery Objekt während triggerHandler() geben den letzten Wert oder Griff wenn keine Handler ausgelöst werden, gibt es nicht definiert

// Example3

<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; 
}); 

Anderer Unterschied ist

Ereignisse ausgelöst mit triggerHandler() nicht Blase die DOM-Hierarchie; Wenn sie nicht direkt vom Zielelement verarbeitet werden, tun sie nichts.

Answer 4

Für mich ist der Hauptunterschied, dass 'triggerHandler' zurückgibt, was vom letzten Handler zurückgegeben wurde, während 'trigger' das jQuery-Objekt zurückgibt.

Also, für einen Handler wie:

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

Mit 'triggerHandler' können Sie folgendes tun:

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

So würden Sie 'triggerHandler', wenn Sie auf das reagieren, wollte Ergebnis vom Handler zurückgegeben.