Trigger event with parameters

Question

This is pretty annoying. I want to just trigger an event in javascript. I need to pass the event object into the parameters as usual and an additional custom parameter.

In jQuery, this would be super easy:

$('#element').trigger('myevent', 'my_custom_parameter');

But I don't want to use this however. Every other question I have found relating to this has just suggested 'use jQuery!' It's for a plugin I'm developing and to require jQuery for one method is pretty silly. Can anyone point to a way to do the above in vanilla JS that's cross-browser compatible?

Answer 1

You may create custom events http://jsfiddle.net/9eW6M/

HTML

<a href="#" id="button">click me</a>

JS

var button = document.getElementById("button");
button.addEventListener("custom-event", function(e) {
    console.log("custom-event", e.detail);
});
button.addEventListener("click", function(e) {
    var event = new CustomEvent("custom-event", {'detail': {
        custom_info: 10,
        custom_property: 20
    }});
    this.dispatchEvent(event);
});

Output after click on the link:

custom-event Object {custom_info: 10, custom_property: 20} 

More information could be found here.

Answer 2

Creating an event

To create a simple event, use the Event constructor.

var event = document.createEvent('MyEvent');

However, if you want to pass data along with the event use the CustomEvent constructor instead.

var event = CustomEvent('MyEvent', { 'detail': 'Wow, my very own Event!' });

Dispatching the event

You can then raise the event with targetElement.dispatchEvent.

var elem =document.getElementById('myElement');
elem.dispatchEvent(event);

Catching the event

elem.addEventListener('MyEvent', function (e) { console.log(e.detail); }, false);

For older browsers( Pre-IE9)

You have to use the document.createEvent function.

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('MyEvent', true, true);

//Any Element can dispatch the event
elem.dispatchEvent(event);

Note that this method is deprecated and should only be used for compatibility purposes.

More help : https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events: MDN: Creating_and_triggering_events

Answer 3

the event object and an additional custom parameter

That's impossible with the native DOM methods. Handlers are called with only one argument, which is the event object. So if there is any data you need to pass along, you need to make it a (custom) property of your event object. You might use the DOM4 CustomEvent constructor for that (see the MDN docs for a cross-browser shim).

Then use dispatchEvent as you would normally with (custom or native) script-triggered events. For IE below 9, you seem to need to use fireEvent.