You can set event.data using jquery trigger

Question

Using jquery.on (), you can pass an optional parameter to set the event data. Can you do this with a trigger?

Answer 1

Short answer:

Can trigger () pass data to your event handlers? Yes (as additional parameters)

Can trigger () pass data directly to event.data? No (only on () does this)

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

Long answer

The trigger () method does 5 basic things.

• It creates a JQueryEventObject with the type and optional namespace that you give it.
• It sends or emits an event of a certain type, which moves through the DOM until it reaches the top or its propagation is stopped.
• It defines the signature of event handlers for this type of event.
  • Function (event) {...} is the default value
• It passes the event as the first parameter to these handlers
• It (optionally) passes additional parameters to any event handlers
  • function (event, optional Params) {}

Numbers 3 and 5 are the most important and important for you. Since you implicitly define api to handle this event, you want to be compatible with the way you fire events so that people who use your code can be compatible with how they use it.

Example 1 Consistency

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

Example 2 Here is a typical example showing both trigger () and on ():

 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']); 

So just remember.

• .trigger (): emit an event and define parameters 2, 3, etc. sequentially if necessary
• .on (): event blocks dom. do some things, add or use event data, and use advanced options that trigger the addition or not.

Answer 2

I hope I was not mistaken, but do you mean the transfer of additional data using the trigger method?

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

And somewhere else ...

 $(app.Model).on("foo", callback); var callback = function(event, additionalData) { console.log(additionalData); } 

Note that if you pass additional data using trigger , your first parameter in the callback function is always the actual event that you fire.

app.Model I used in parentheses an object that should trigger an event, and also listens for this event. Think of it as a namespace. You can always use document , any DOM selector, or even an object that you like, just make sure that both trigger and on must use the same object (that is, DOM elements that are temporarily removed from the DOM, prone to errors).

Answer 3

You can do this: -

Example

  //Create a new jQuery.Event object without the "new" operator. var e = jQuery.Event("click"); // trigger an artificial click event jQuery("body").trigger( e ); 

You can also pass event.data with the same approach. Refer to this Event Object

Answer 4

That was the approach I did.

 $('#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 5

I know a workaround we can use for this.

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

Here is a demo

Answer 6

Yes. The documentation states:

.trigger (eventType [, extraParameters])

Note the difference between the additional parameters that we pass here and the eventData parameter on the .bind() method. Both are mechanisms for passing information to the event handler, but the extraParameters argument in .trigger() allows you to specify information at the time the event is eventData , while the eventData argument for .bind() requires that the information is already computed during the binding of the handler.

Answer 7

In the jQuery site you can see the announcement for the trigger function: .trigger( eventType [, extraParameters] )

extraParameters must be an array or a single object, and you will be allowed to receive these objects using the arguments [1+] (arguments [0] are equal to the event object).

So here is an example:

 $('#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 8

As far as I know, the same dataObject that you defined with the original:

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

will also be sent when using `$ ('selector'). trigger ('eventName').

you can also pass parameters (for example, other references in your answers), but these parameters will be additional arguments (you will still have dataObject set in the .on() function).

Answer 9

It took me a while to understand the philosophy of this. An event includes two objects: a listener and a dispatcher. The event.data field event.data intended to be used only by the listener. This is similar to naming a phone number:

 $("[phone]").on("incomingcall", null, "Mom", pickup); 

You can pick up the phone and wait for the other side to tell you that she is your mother. Or you can use event.data to add additional information related to this event.

The $.trigger and $.triggerHandler are called by the event dispatcher. Therefore, they do not allow event.data to be specified. Instead, you can use their extraParameters argument.

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