How do I create a custom event class in Javascript?

Question

How do I create a custom event class similar to ActionScript? What I mean by that is a class that I can use to fire off my own events, send the necessary data.

I don't want to use third-party libraries like YUI or jQuery to do it. My goal is to be able to send a event that looks like this:

document.addEventListener("customEvent", eventHandler, false);

function eventHandler(e){
    alert(e.para1);
}

document.dispatchEvent(new CustomEvent("customEvent", para1, para2));

Please no third-party library solutions.

You can build your own. It's very simple, pure JS and does not require a DOM - check my answer here: stackoverflow.com/questions/31110706/… — Jakob Sternberg
– Jakob Sternberg, Commented Oct 7, 2017 at 14:49

pfleidi · Accepted Answer · 2010-10-03 13:44:06Z

26

A method that worked for me was to call document.createEvent(), init it and dispatch it with window.dispatchEvent().

  var event = document.createEvent("Event");
  event.initEvent("customEvent", true, true);
  event.customData = getYourCustomData();
  window.dispatchEvent(event);

answered Oct 3, 2010 at 13:44

pfleidi

2,9363 gold badges20 silver badges10 bronze badges

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

4 Comments

nil Over a year ago

does this support all A browsers, including old ones like IE6?

Ajax Over a year ago

This is deprected according Mozilla MDN

Drew Noakes Over a year ago

The link from @Ajax doesn't mention deprecation any more. Use this MDN link instead: developer.mozilla.org/en-US/docs/Web/API/document.createEvent

Nilpo Over a year ago

Mozilla MDN also mentions that the alternative (the Event constructor) is not supported by IE.

Rich Hauck · Accepted Answer · 2012-01-03 16:23:31Z

5

I'm a little late to the party here, but was searching for the same thing. I'm not keen on the first answer (above) because it relies upon the document to manage the custom event. This is dangerous because it's global and could potentially conflict with another script should that script coincidentally rely on the same custom event.

The best solution I've found is here: Nicholas C. Zakas - Custom Events in Javascript

Unfortunately, since javascript doesn't support inheritance keywords, it's a bit messy with prototyping, but it definitely keeps things tidy.

answered Jan 3, 2012 at 16:23

Rich Hauck

511 silver badge1 bronze badge

Comments

Drew Noakes · Accepted Answer · 2014-11-04 10:42:34Z

1

This is straightforward when using DOM elements to broker the events.

Given an element:

var element = document.querySelector('div#rocket');

For a client to subscribe:

element.addEventListener('liftoff', function(e)
{
    console.log('We have liftoff!');
});

Then to dispatch/raise/fire the event, use this code:

element.dispatch(new Event('liftoff'));

answered Nov 4, 2014 at 10:42

Drew Noakes

313k174 gold badges704 silver badges770 bronze badges

Comments

nicholas · Accepted Answer · 2011-01-23 07:02:35Z

-1

This by John Resig:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

More at his blog post at http://ejohn.org/projects/flexible-javascript-events/.

answered Jan 23, 2011 at 7:02

nicholas

14.6k22 gold badges86 silver badges150 bronze badges

1 Comment

auco Over a year ago

While the code is surely useful, I don't think it helps with the issue. You can attach and detach events to elements, but the original question was how to create and send (dispatch) a custom event.

WHill · Accepted Answer · 2014-01-06 18:31:09Z

-1

I was just thinking of assigning a supported handler to a new namespace i.e. a reference to a supported event. The code below works (paste it in console of Chrome) but you can write it in a better format, and you should have additional helper methods (that can redefine themselves as well), for xBrowser support, and for sniffing support types (which after you've detected which path to use, you'll have the function redefine itself. I hope what I have below helps.

var de = document.documentElement || document.getElementsByTagName[0];

function all(){ console.log('all') };

var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() {
    return ({
            customEvent: function() {
                if ('onclick' in de ) {
                    return 'click';
                }
            },
            init: function(){ return this.customEvent(); }
        }).init();
}();

de.addEventListener(customEventForSomeSpecificElement, all, false);

edited Jan 6, 2014 at 18:31

answered Nov 14, 2013 at 15:56

WHill

624 bronze badges

1 Comment

Eph Over a year ago

this does not dispatch custom events.

Andris · Accepted Answer · 2010-01-13 20:27:24Z

-3

It's not so hard actually - there isn't so many event definitions, only three versions. The first one is the corect one (addEventListener), then there's the IE way (attachEvent) and then there's the compatibility way for older browser (element.onevent = function)

So a complete event handling solution would look something like this:

setEvent = function(element, eventName, handler){
  if('addEventListener' in element){
    //W3
    element.addEventListener(eventName,handler,false);
  }else if('attachEvent' in elm){
    //IE
    elm.attachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = handler;
  }
}

and to clear events:

clearEvent = function(element, eventName, handler){
  if('removeEventListener' in element){
    //W3
    element.removeEventListener(eventName,handler,false);
  }else if('detachEvent' in elm){
    //IE
    elm.detachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = null;
  }
}

and an example:

setEvent(document, "click", function(){alert('hello world!');});
clearEvent(document, "click", function(){alert('hello world!');});

This is not really a complete example though since the compatibility handler always overwrites the previous events (it's not appending actions, it's overwriting) so you probably would like to check if a handler is already set and then save it into some temporary variable and fire it inside the event handler function.

answered Jan 13, 2010 at 20:27

Andris

27.9k4 gold badges37 silver badges38 bronze badges

2 Comments

Josua Pedersen Over a year ago

That does not help, I need to have a Custom Event. What that means is just like there is a MouseEvent there can be a CustomEvent. What you are doing there is good but not the solution I was looking for. I need to be able to dispatch a event and send some data with the event. For example in a game, I want to dispatch a event for score to get updated I would send the score that is needed to be added with the event.

subrat71 Over a year ago

Not the answer for the given question

Collectives™ on Stack Overflow

How do I create a custom event class in Javascript?

6 Answers 6

4 Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related