With jQuery .on()
you can pass an optional parameter to set the event data. Can you do this with trigger as well?
11 Answers
Short Answer:
Can trigger() pass data to your event handlers? Yes (as additional parameters)
Can trigger() pass data into the event.data object directly? 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 main things.
- It creates a JQueryEventObject with the type and optional namespace you give it
- It sends or emits an event of a specific type that travels up the DOM until it reaches the top or its propagation is stopped.
- It defines the signature of event handlers for that type of event.
- function(event) {...} is the default
- It passes the event as the first parameter to those handlers
- It (optionally) passes additional parameters to any handlers of the event
- function(event, additionalParams) {}
Numbers 3 and 5 are most important and relevant to you. Since you implicitly define the api for handling this event, you want to be consistent with how you trigger events so that people who use your code can be consistent 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 the 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 the event and define parameter 2, 3, etc consistently if needed
.on(): event is bubbling up the dom. do some stuff, add to or use event data and use the extra params that trigger added or not.
Tangent: If you want to define event handlers for dynamic elements that can be added or removed arbitrarily, this is very easy with jQuery. See this answer: In jQuery, how to attach events to dynamic html elements?
I hope I didn't get you wrong but do you mean passing additional data with 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 with trigger
, your first parameter in the callback function always is the actual event you are triggering.
The app.Model
I used in the parenthesis is the object that should trigger an event and that also listens on that event. Think of it as kind of a namespace. You can always use document
, any DOM selector or even object you like, just make sure that both the trigger
and the on
must use the same object (that is, DOM elements that are removed from the DOM temporarily are error-prone).
-
3+1 for you, the docs don't really mention how to access this additional data. Commented Nov 3, 2013 at 6:31
You can do this way:-
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 pass event.data too with the same approach. Refer this Event Object
-
Can you show with code example how to pass event.data with this approach? Commented May 14, 2014 at 21:31
-
var e = jQuery.Event("click"); e.data = "a nice data"; jQuery("body").trigger( e );– DoradCommented Feb 20, 2015 at 11:23
-
3That is the correct answer for this question. Other "answers" are hacks.– vsyncCommented Oct 24, 2016 at 20:43
-
This doesn't work though.
e.data
is undefined by the time it gets to theon
handlers. Commented Aug 3, 2017 at 4:33
This was the approach I took.
$('#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 });
I know an 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
Yes. The documentation says:
.trigger( eventType [, extraParameters] )
Note the difference between the extra parameters we're passing here and the
eventData
parameter to the.bind()
method. Both are mechanisms for passing information to an event handler, but theextraParameters
argument to.trigger()
allows information to be determined at the time the event is triggered, while theeventData
argument to.bind()
requires the information to be already computed at the time the handler is bound.
In jQuery site you can see the declaration for the trigger
function: .trigger( eventType [, extraParameters] )
The extraParameters
must be an array or a single object and you will be allowed to get these objects with arguments[1+] (arguments[0] is equal to event object).
So, here's 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]);
As far as I know, the same dataObject
that you defined with the original :
$('selector').on('eventName', dataObject , functionName)
will be also sent when you use `$('selector').trigger('eventName').
you can also pass parameters (like other mentions in their answers) but those parameters will be additional arguments (you will still have the dataObject
you set in the .on()
function).
-
Good point. It's worth mentioning that dataObject is accessible by data property of event. Something like this function foo(e) { console.log(e.data)} Commented Dec 28, 2012 at 22:40
It took me a while to understand the philosophy behind this. An event involves two entities: listener and dispatcher. The event.data
field was intended to be used by the listener only. It's sort of like assigning a name to a phone number:
$("(818)548-2733").on("incomingcall", null, "Mom", pickup);
You could pick up the phone and wait for the other side to tell you that she is your Mom. Or you can use event.data
to attach the extra information relevant to this event.
The $.trigger
and $.triggerHandler
methods are called by the dispatcher side of an event. That's why they don't let you specify the event.data
. Instead, you can use their extraParameters
argument.
$("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");
-
This is valid solution. Use it, it is the simples way ;-) Commented Mar 4, 2015 at 11:32
-
...and a super dangerous way. What if the pressed button already has data on it? This does nothing to preserve the previous data items.– dudewadCommented Jan 12, 2016 at 22:48
you can do this way
<input id="btn" type="button" />
<input id="btn2" type="button" />
$("#btn").bind("click",function(e) {
var data2 = {type:"click",name:"Raptors",sport:"basketball"};
$("#btn2").trigger(data2);
});
$("#btn2").bind("click",function(e) {
console.log(e.name + " " + e.sport);
});