triggerHandler vs. trigger en jQuery

Question

Por curiosidad: ¿para qué sirve/use cases para jQuery's triggerHandler? Por lo que puedo decir, las únicas diferencias "reales" entre trigger y triggerHandler son si el evento nativo dispara o no y el comportamiento de burbujeo del evento (aunque el comportamiento de burbujeo de triggerHandler no parece difícil de replicar con trigger en algunos más líneas de código). ¿Cuál es la ventaja de garantizar que el evento nativo no se active?

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

Answer 1

De los Docs 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 lo hace provocar el comportamiento predeterminado de un evento (como un envío de formulario ).

no impedir las acciones del navegador por defecto le permiten especificar una acción que ocurre en el enfoque o seleccione, etc, etc, etc, que se aplica un estilo. Tal vez tenga un menú dinámico basado en Javascript, por lo que no desea aplicar el estilo exclusivamente con CSS; de lo contrario, aquellos con el Javascript desactivado no entenderán por qué el diseño parece extraño. Se puede usar algo como $('menu1select').triggerHandler('click');

• Mientras .trigger() funcionará en todos los elementos que coinciden con el objeto jQuery , .triggerHandler() sólo afecta el primer elemento coincidente.

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

• salidas lanzadas con .triggerHandler() No propagarse por la jerarquía DOM; si no se manejan directamente por el elemento de destino, no hacen nada.

previene la propagación, hopyfully no tienen que explicar esto ...

• lugar de devolver el objeto jQuery (para permitir el encadenamiento), .triggerHandler() devuelve lo valor devuelto por el último controlador provocó que se ejecutara. Cuando no se emiten manipuladores, devuelve indefinido

Ésta debe explicarse por sí misma, así ...

Answer 2

¿Cuál es la ventaja de garantizar que el evento nativo no se active?

• Usted tiene acciones unidas a un evento de 'enfoque', pero que no desea que el navegador para centrarse realmente enfocarlo (que podría parecer tonto pero podría suceder, no podría? Como un código que le gustaría ejecutar una vez sin perder el enfoque actual).

• Un componente que está haciendo desea desencadenar 'carga' (solo un ejemplo de algo genérico) de otro componente que está dentro de él.

  En ese caso, si está llamando 'carga' de hijos cuando llega la 'carga' del elemento primario, no desea hacer esto porque causaría una llamada infinita si no se llama a event.stopPropagation por los oyentes de eventos 'carga' (causados ​​por bubling):

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

En ese caso, usted tiene que llamar triggerHandler().

Answer 3

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

// Ejemplo1 para el desencadenador. Los tres eventos de clic de botón se activan cuando se utiliza el desencadenador. // Pruebe a reemplazar el método de activación con triggerHandler(). Verá que solo se disparará el primer elemento de botón controlador de eventos.

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

// gatillo sustituto con triggerHandler para ver la diferencia

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

Diferencia 2: cuando se utiliza triggerHandler() para un evento elemento, el evento nativo no será llamado para ese elemento. trigger() funcionará bien.

// Ejemplo:

gatillo

// sustituto 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: gatillo() Devuelve objeto Jquery mientras que triggerHandler() Devuelve el último valor mango o Si no se activan los manipuladores, devuelve indefinido

// 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 generan la jerarquía DOM; si no son manejados por el elemento objetivo directamente, no hacen nada.

Answer 4

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

Así, para un manejador tales como:

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

El uso de 'triggerHandler' puede hacer lo siguiente:

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

por lo que sería utilizar 'triggerHandler' si desea responder a la resultado devuelto por el controlador.