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?

Sherrillsherrington

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

Why do you need custom events in the DOM? – Synecious

@SeanVieira IE8 compatibility preferably. – Sherrillsherrington

@Synecious - 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) – Cogon

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

@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… – Synecious

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

@Synecious - Oh sorry I misunderstood. The DOM is needed in this case – Sherrillsherrington

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

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.

Director

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

Riley

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.

Synecious

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>

Viable