Passing event listener parameters with native javascript?

Question

I have implement three jQuery-like functions for controling my custom events (i can't using jquery in my project :-():

var Events = {
   on: function(evt, fn) {
       document.addEventListener(evt, fn);
   },
   off: function() {
       document.removeEventListener(evt, fn);
   },
   trigger: function(evt, params) {
        var event; // The custom event that will be created
            if (document.createEvent) {
                event = document.createEvent("HTMLEvents");
                event.eventName = evt;
                event.initEvent(evt, true, true);
                event.data = params;
                window.dispatchEvent(event);
            } else {
                event = document.createEventObject();
                event.eventName = evt;
                event.eventType = evt;
                event.data = params;
                window.fireEvent("on" + event.eventType, event);
            }
   }
}

When i using my observer implementation i have:

Events.on('custom', function(e) {
       console.log(e.data); // output [5,10,15]
});

Events.trigger('custom', [5, 10, 15]);

But i need modify my trigger function to call listener with additional parameters after event object. Something like jquery.trigger() function with extraParameters attribute. For my example:

Events.on('custom', function(e, a, b, c) {
     console.log(a, b, c); //output [5,10,15]
});

Events.trigger('custom', [5,10,15]);

Strikers · Accepted Answer · 2015-06-03 14:35:23Z

1

    var event = new CustomEvent('build', { 'detail': 'test' });


    // Listen for the event.
    document.addEventListener('build', function (events) {
        console.log(events.detail)
    }, false);

    // Dispatch the event.
    document.dispatchEvent(event);

In this way you can pass data to custom created event

ref

EDIT:

if (window.CustomEvent) {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: 'data'});
}

this is jquery equivalent to trigger

edited Jun 3, 2015 at 14:35

answered Jun 3, 2015 at 14:07

Strikers

4,7742 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xercool Over a year ago

I got the results with event.detail but i need got it with extraParameters as listener function arguments.... It's important for me for one reason: parameters must be passed as array of arguments (not as object)!

Strikers Over a year ago

@xercool then pass all the data in the detail as an object { 'detail': {'key1': value1, 'key2': 'value2' } }

xercool Over a year ago

it doesn't good for me. I need just imitate jquery.trigger() as i wrote in my question. I will have to rewrite a lot of code to change this approach. Sorry

Strikers Over a year ago

I doubt it is the only way. its compatible with IE 9+

xercool Over a year ago

@strikers it is the only way. Now params defined as arguments using extraParameters in all listeners.

Collectives™ on Stack Overflow

Passing event listener parameters with native javascript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related