Can you set event.data with jquery trigger

Question

With jQuery .on() you can pass an optional parameter to set the event data. Can you do this with trigger as well?

Answer 1

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.

1. It creates a JQueryEventObject with the type and optional namespace you give it
2. 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.
3. It defines the signature of event handlers for that type of event.
   • function(event) {...} is the default
4. It passes the event as the first parameter to those handlers
5. 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?