web-dev-qa-db-fra.com

triggerHandler vs trigger dans jQuery

Par curiosité, à quoi servent/des cas d'utilisation de la variable triggerHandler de jQuery? Autant que je sache, les seules "vraies" différences entre trigger et triggerHandler dépendent du fait que l'événement natif se déclenche ou non, et que le comportement bouillonnant d'événements (bien que le comportement bouillonnant de triggerHandler ne semble pas difficile à reproduire avec trigger dans quelques lignes supplémentaires). code). Quel est l'avantage de s'assurer que l'événement natif ne se déclenche pas?

Je suis curieux de savoir s’il s’agit d’une fonction de commodité ou s’il existe une raison plus profonde, et pourquoi/quand je l’utiliserais.

jqueryeventsjavascript-eventsjquery-triggerjquery-triggerhandler
27
David Eads

À partir de la documentation à http://api.jquery.com/triggerHandler/

La méthode .triggerHandler () se comporte de la même manière que .trigger (), avec les exceptions suivantes:

  • La méthode .triggerHandler () ne provoque pas le comportement par défaut d'un événement (tel qu'une soumission de formulaire).

Si vous n'empêchez pas les actions par défaut du navigateur, vous pouvez spécifier une action qui se produit sur le focus ou sur une sélection, etc., etc., etc., qui applique un style. Vous avez peut-être un menu dynamique basé sur Javascript, vous ne voulez donc pas appliquer le style uniquement avec CSS, sinon ceux avec Javascript désactivé ne comprendront pas pourquoi la mise en page semble étrange. Vous pouvez utiliser quelque chose comme $('menu1select').triggerHandler('click');

  • Alors que .trigger () fonctionnera sur tous les éléments mis en correspondance par l'objet jQuery, .triggerHandler () n'affecte que le premier élément mis en correspondance.

Si vous avez par exemple un événement qui cache un élément onclick et que vous souhaitez appeler cette fonction de manière générale, au lieu de devoir spécifier chaque élément, vous pouvez utiliser $('.menu').triggerHandler('click');

  • Les événements créés avec .triggerHandler () ne font pas apparaître la hiérarchie dans le DOM. S'ils ne sont pas gérés directement par l'élément cible, ils ne font rien.

Empêche la propagation, heureusement, ne pas avoir à expliquer celui-ci ...

  • Au lieu de renvoyer l'objet jQuery (pour permettre l'enchaînement), .triggerHandler () renvoie quelle que soit la valeur renvoyée par le dernier gestionnaire à exécuter. Si aucun gestionnaire n'est déclenché, il retourne undefined

Celui-ci devrait être explicite aussi bien ...

65
Robert

Quel est l'avantage de s'assurer que l'événement natif ne se déclenche pas?

  • Vous avez des actions liées à un événement 'focus' mais vous ne voulez pas que le navigateur se concentre vraiment (cela peut paraître stupide mais cela pourrait arriver, ne pourrait-il pas?), Comme un code que vous aimeriez exécuter une fois sans perdre la focus actuel).

  • Un composant que vous êtes en train de créer veut déclencher le "chargement" (juste un exemple d'un élément générique) d'un autre composant qu'il contient.

    Dans ce cas, si vous appelez 'load' of children quand 'load' du parent arrive, vous ne voulez pas le faire car cela provoquerait un appel infini si event.stopPropagation n'est pas appelé par les écouteurs de événement 'load' (causé par bubling):

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

Dans ce cas, vous devez appeler triggerHandler ().

2
Micaël Félix

Différence 1: vous pouvez appeler tous les éléments mis en correspondance par l'objet JQuery à l'aide de trigger.

// Exemple1 pour le déclencheur. Les trois événements de clic de bouton sont déclenchés lorsqu’un déclencheur est utilisé. // Essayez de remplacer la méthode de déclenchement par triggerHandler (). Vous verrez que seul le premier gestionnaire d’événements d’élément de bouton sera déclenché.

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

// remplace trigger par triggerHandler pour voir la différence

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

Différence 2: Lors de l'utilisation de triggerHandler () pour un événement d'élément, l'événement natif ne sera pas appelé pour cet élément. trigger () fonctionnera bien.

//Exemple:

// remplace trigger par triggerHandler pour voir la différence

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

});

Différence 3: trigger () renvoie l'objet Jquery alors que triggerHandler () renvoie la dernière valeur de descripteur ou si aucun gestionnaire n'est déclenché, il renvoie non défini

// Exemple3

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

L'autre différence est

Les événements déclenchés avec triggerHandler () ne font pas apparaître la hiérarchie dans le DOM. S'ils ne sont pas gérés directement par l'élément cible, ils ne font rien.

1
maxspan

Pour moi, la principale différence est que 'triggerHandler' renvoie tout ce qui a été renvoyé par le dernier gestionnaire, alors que 'trigger' renvoie l'objet jQuery.

Donc, pour un gestionnaire tel que:

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

En utilisant 'triggerHandler', vous pouvez effectuer les opérations suivantes:

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

Vous utiliseriez donc 'triggerHandler' si vous souhaitez répondre au résultat renvoyé par le gestionnaire.

0
Steve Roberts