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?

Solution 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.

Solution 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

Solution 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.

Comments

[Sean Vieira]

How cross browser? All modern browsers (e. g. IE 10+) or current legacy (IE 8) or as far back as is feasible?

[Bergi]

Why do you need custom events in the DOM?

[andy]

@SeanVieira IE8 compatibility preferably.

[Sean Vieira]

@Bergi - I would imagine because he wants his component to create events that make sense for the component. (For example, using an addOption event rather than click and blur)

[andy]

@Bergi It's a plugin to trigger an event on highlight but there are lots of reasons for custom events.

[Bergi]

@andy: OK, I just wanted to know about the context of your question, whether you need the DOM or could work without it. Now it's clear…

[Bergi]

Have you found anything already (that is not cross-browser-compatible)?

[andy]

@Bergi - Oh sorry I misunderstood. The DOM is needed in this case

[andy]

Not as of yet no. Every article I've come across is either vague or doesn't go into the custom parameters part