javascriptcustom-events

Trigger event with parameters


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

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