Puede establecer event.data con jquery trigger

Question

Con jquery .on() puede pasar un parámetro opcional para establecer los datos del evento. ¿Puedes hacer esto con el gatillo también?

Answer 1

Espero no haberlo malinterpretado pero ¿quiere decir pasar datos adicionales con el método trigger?

$(app.Model).trigger("foo", additionalData); 

Y en otro lugar ...

$(app.Model).on("foo", callback); 

var callback = function(event, additionalData) { 
    console.log(additionalData); 
} 

Tenga en cuenta que si se pasa de datos adicionales con trigger, el primer parámetro de la función de devolución de llamada siempre es el caso real que están provocando.

El app.Model que utilicé entre paréntesis es el objeto que debe desencadenar un evento y que también escucha ese evento. Piense en ello como una especie de espacio de nombres. Siempre puede usar document, cualquier selector DOM o incluso el objeto que desee, solo asegúrese de que tanto el trigger como el on deben usar el mismo mismo objeto (es decir, los elementos DOM que se eliminan temporalmente del DOM son propensos a errores) .

Answer 2

Puede hacerlo de esta manera: -

Ejemplo

//Create a new jQuery.Event object without the "new" operator. 
    var e = jQuery.Event("click"); 

    // trigger an artificial click event 
    jQuery("body").trigger(e); 

Puede pasar event.data también con el mismo enfoque. Consulte esto Event Object

Answer 3

Sí. La documentación dice:

.trigger (eventType [,]) ExtraParameters

nota la diferencia entre los parámetros adicionales que estamos aquí de paso y el parámetro eventData al método .bind(). Ambos son mecanismos para pasar información a un manejador de eventos, pero el argumento extraParameters a .trigger() permite que se determine la información en el momento en que se desencadena el evento, mientras que el argumento requiere que la información ya se compute en el momento en que el controlador está vinculado .

Answer 4

Sé una solución podemos utilizar para este

$("button").on("click", function(event) { 
    event.data = $(this).data('events'); // get the data value 
    alert(event.data); //use your data as you want 
}); 


//Now set the data value and trigger 
$("button").data('events','youreventsvalue').trigger("click"); 

Aquí es una demo

Answer 5

En jQuery sitio se puede ver la declaración de la función trigger: .trigger(eventType [, extraParameters])

El extraParameters debe ser una matriz o un solo objeto y se le permitirá obtener estos objetos con argumentos [1+] (argumentos [0] es igual al objeto del evento).

Por lo tanto, he aquí un ejemplo:

$('#foo').bind('custom', function(event) { 
    if (arguments.length > 1) { 
    $.each(arguments, function(i,arg){ 
     alert("element " + i + " is " + arg); 
    }) 
    } 
}); 

$('#foo').trigger('custom', ['Custom', 'Event', { 'test' : 'attr from object' }, 123]); 

Answer 6

Por lo que yo sé, el mismo dataObject que ha definido con el original:

$('selector').on('eventName', dataObject , functionName) 

se envió también cuando se utiliza `$ ('selector'). trigger ('nombre de evento').

También puede pasar parámetros (como otras menciones en sus respuestas), pero esos parámetros serán argumentos adicionales (todavía tendrá el dataObject que estableció en la función .on()).

Answer 7

Este fue el enfoque que tomé.

$('#foo').on('click', { init: false }, function(e, data) { 
     data = data || e.data; 
     console.log(data.init); // will be true in the trigger, and false in the click. 
    }) 
    .trigger('click', { init: true }); 

Answer 8

respuesta corta:

Can trigger() pasar datos a los controladores de eventos? Sí (como parámetros adicionales)

Pueden gatillo() los datos pasan a la event.data objeto directamente? Sin (sólo en () hace esto)

// Using this will pass myData to every event handler as the second parameter. 
trigger('myEvent', [myData]) 
// Instead of this 
on('myEvent', function(evt) {...}); 
// You would do this 
on('myEvent', function(evt, myData) {...}); 

respuesta Largo

El método trigger() hace 5 cosas principales.

1. crea una JQueryEventObject con el tipo y el espacio de nombre opcional que le dan
2. Se envía o emite un evento de un tipo específico que viaja hasta el DOM hasta que llega a la parte superior o su propagación se detiene.
3. Define la firma de los controladores de eventos para ese tipo de evento.
   • función (evento) {...} es el valor predeterminado
4. Se pasa el evento como el primer parámetro a esos controladores de
5. It (opcionalmente) pasa parámetros adicionales a cualquier controlador del evento
   • función (evento, additionalParams) {}

Los números 3 y 5 son los más importantes y relevantes para usted. Dado que define implícitamente la API para manejar este evento, quiere ser coherente con la forma en que desencadena los eventos para que las personas que usan su código puedan ser coherentes con la forma en que lo usan.

Ejemplo 1 consistencia

function Car(speed, tires, brakes) { 
    this.speed = speed; 
    this.tires = tires; 
    this.brakes = brakes; 
} 

Car.prototype.brake = function(amount) { 
    // You can do this (Event handler will have access to these parameters) 
    car.trigger('brake.car', [this.speed, this.brakes, this.tires, amount]) 
    // Or this (Event handler will have access to these parameters) 
    car.trigger('brake.car', [this, amount]) 
    // but try not to mix and match with the same event type 
} 
... 
//This is the first way from above (choose one or the other, but don't mix and match). 
passenger.on('brake.car', {person: passenger}, function(evt, carSpeed, carBrakes, carTires, brakeAmount){ 
    if(brakeAmount > 50) 
     passenger.hangOnTight(); 
    } 
}) 

... 
// This is the second way from above (choose one or the other, but don't mix and match). 
passenger.on('brake.car', function(evt, car, brakeAmount){ 
    if(brakeAmount > 50) 
     passenger.hangOnTight(); 
    } 
}) 

Ejemplo 2 Aquí es el ejemplo típico que muestra tanto trigger() y en():

jQuery(document).on('eventName' {eventData1: 'foo', eventData2: 'bar'}, function (evt, extraParam1, extraParam2) { 
    //This code runs when the event is triggered 
    console.log(evt.data.eventData1) // foo 
    console.log(evt.data.eventData2) // bar 
    console.log(extraParam1) // 'extra param 1' 
    console.log(extraParam2) // 'extra param 2' 
}); 

jQuery(document).trigger('eventName', ['extra param 1', 'extra param 2']); 

Así que recuerde.

• .trigger(): emitir el evento y definir el parámetro 2, 3, etc constantemente si es necesario
• .on(): evento está burbujeando hasta el DOM. hacer algunas cosas, agregar o usar datos de eventos y usar los parámetros adicionales que disparan o no.

Answer 9

Me tomó un tiempo entender la filosofía detrás de esto. Un evento involucra dos entidades: oyente y despachador. El campo event.data estaba destinado a ser utilizado solo por el oyente. Es algo así como la asignación de un nombre a un número de teléfono:

$("(818)548-2733").on("incomingcall", null, "Mom", pickup); 

Se puede coger el teléfono y esperar a que el otro lado para decirle que ella es su mamá. O puede usar event.data para adjuntar la información adicional relevante para este evento.

Los métodos $.trigger y $.triggerHandler son llamados por el lado del despachador de un evento. Es por eso que no le permiten especificar el event.data. En cambio, puede usar su argumento extraParameters.

Answer 10

$("pressedButton").on("click", function(event) { 
    var buttonID = $(this).data('buttonID'); 
    alert(buttonID); // alerts 'save' string passed as an argument 
}); 

$("pressedButton").data('buttonID','save').trigger("click");