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.

Answer 4

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.

so you can use prototype to extend DOM and create your own methods instead of using jQuery (without new customEvent().

An example here: (or you can modify it and send callback function in dispatchCustomEvent)

// set custom event to dom objects
Element.prototype.addCustomEventListener = function(eventName, callbackFunction) {
    var customEvent = {
        name: eventName,  // just for info
        callbackFunction: callbackFunction  // function to use on callback
    };
    if (!this.customEvents) {
        this.customEvents = [];
    }
    this.customEvents[eventName] = customEvent;
    return this;
};

// dispatch or trigger
Element.prototype.dispatchCustomEvent = function() { // args: eventName, args for callback
    var args = Array.from(arguments);
    var eventName = args.shift();
    // apply callback function
    // you can also add 'this' to the args list and have access to element:
    // args.unshift(this)
    this.customEvents[eventName].callbackFunction.apply(null, args);
    return this; // or return result of callbackFunction
}

// function to call
function foo(something) {
  // do some stuff here
  console.log('There is ' + something);
}

document.getElementById("mainContainer").addCustomEventListener('sweetEvent', foo);

// somewhere else in the code, or in console you can than execute
document.getElementById("mainContainer").dispatchCustomEvent('sweetEvent', 'my custom attribute');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>something</title>
</head>

<body id="mainContainer">
    some content here
</body>
</html>