example - triggerHandler vs. trigger en jQuery

trigger submit jquery

Question

Por curiosidad: ¿cuál es el propósito de los casos de uso de jQuery triggerHandler ? Por lo que puedo decir, las únicas diferencias "reales" entre el trigger y el triggerHandler son si el evento nativo se dispara o no, y el comportamiento de triggerHandler eventos (aunque el comportamiento de triggerHandler del triggerHandler de triggerHandler no parece difícil de replicar con el trigger en algunos más) líneas de código). ¿Cuál es la ventaja de asegurar que el evento nativo no se dispare?

Tengo curiosidad por saber si esta es una función de conveniencia o si existe una razón más profunda por la cual existe y por qué / cuándo la usaría.

Answer 1

¿Cuál es la ventaja de asegurar que el evento nativo no se dispare?

• Tiene acciones vinculadas a un evento de "enfoque", pero no desea que el navegador se enfoque realmente (puede parecer tonto pero podría suceder, ¿no es como un código que le gustaría ejecutar una vez sin perder el enfoque actual).

• Un componente que está haciendo querer desencadenar ''carga'' (solo un ejemplo de una cosa genérica) de otro componente que está dentro de él.

  En ese caso, si llama a ''carga'' de hijos cuando llega la ''carga'' del padre, no quiere hacer esto porque causaría una llamada infinita si el evento.stopPropagation no es llamado por los oyentes de evento ''load'' (causado por el bubling):

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

En ese caso tienes que llamar a triggerHandler ().

Answer 2

De los documentos en http://api.jquery.com/triggerHandler/

El método .triggerHandler () se comporta de manera similar a .trigger (), con las siguientes excepciones:

• El método .triggerHandler () no hace que se produzca el comportamiento predeterminado de un evento (como el envío de un formulario).

La no prevención de las acciones predeterminadas del navegador le permite especificar una acción que ocurra al enfocar o seleccionar, etc., etc. que aplique un estilo. Tal vez tenga un menú dinámico basado en Javascript, por lo que no desea aplicar el estilo únicamente con CSS, de lo contrario, aquellos que tengan Javascript deshabilitado no entenderán por qué el diseño parece extraño. Puede usar algo como $(''menu1select'').triggerHandler(''click'');

• Mientras que .trigger () operará en todos los elementos que coinciden con el objeto jQuery, .triggerHandler () solo afecta al primer elemento coincidente.

Si tiene un evento que oculta un elemento en un clic por ejemplo, y desea llamar a esa función en general, en lugar de tener que especificar cada elemento, puede usar $(''.menu'').triggerHandler(''click'') ;

• Los eventos creados con .triggerHandler () no hacen saltar la jerarquía DOM; si no son manejados directamente por el elemento de destino, no hacen nada.

Previene la propagación, pero no tiene que explicar esto ...

• En lugar de devolver el objeto jQuery (para permitir el encadenamiento), .triggerHandler () devuelve cualquier valor devuelto por el último controlador que provocó la ejecución. Si no se activan controladores, devuelve undefined

Este debería ser autoexplicativo también ...

Answer 3

Para mí, la principal diferencia es que ''triggerHandler'' devuelve lo que fue devuelto por el último controlador, mientras que ''trigger'' devuelve el objeto jQuery.

Entonces, para un manejador como:

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

Usando ''triggerHandler'' puedes hacer lo siguiente:

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

Entonces, usaría ''triggerHandler'' si quisiera responder al resultado devuelto por el controlador.

Answer 4

Diferencia 1: puede llamar a todos los elementos que coincidan con el objeto JQuery utilizando el activador.

// Ejemplo 1 para disparador. Los 3 eventos de clic de botón se activan cuando se usa el disparador. // Intente Reemplazar el método de activación con triggerHandler (). Verás que solo se activará el primer controlador de eventos de elementos de botón.

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

// sustituye trigger con triggerHandler para ver la diferencia

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

Diferencia 2: cuando se usa triggerHandler () para un evento de elemento, el evento nativo no se llamará para ese elemento. El disparador () funcionará bien.

//Ejemplo:

// sustituye trigger con triggerHandler para ver la diferencia

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

});

Diferencia 3: trigger () devuelve el objeto Jquery mientras que triggerHandler () devuelve el último valor de identificador o si no se activan controladores, devuelve undefined

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

Otra diferencia es

Los eventos activados con triggerHandler () no hacen saltar la jerarquía DOM; si no son manejados directamente por el elemento de destino, no hacen nada.