I am trying to figure out how to properly create and fire events in JavaScript, so in the process of learning ran into this page:

.createEvent

Which at the top informs me of the following:

The createEvent method is deprecated. Use event constructors instead.

Googling JS event constructors was not very fruitful - topics talking about constructors in general, but not what I am looking for. Could somebody please explain to me what are the event constructors and provide a good example of their usage?

I am trying to figure out how to properly create and fire events in JavaScript, so in the process of learning ran into this page:

https://developer.mozilla/en-US/docs/DOM/document.createEvent

Which at the top informs me of the following:

The createEvent method is deprecated. Use event constructors instead.

Googling JS event constructors was not very fruitful - topics talking about constructors in general, but not what I am looking for. Could somebody please explain to me what are the event constructors and provide a good example of their usage?

• javascript
• events
• dynamic

Share Improve this question Follow edited Jul 1, 2013 at 5:11 alex 491k204204 gold badges889889 silver badges991991 bronze badges asked Apr 11, 2013 at 14:31 NindzAINindzAI 58055 silver badges2020 bronze badges 1

• just a note. Sometime the deprecated way in one browser is still the most widely supported on all browsers available. – gcb Commented Jul 7, 2013 at 5:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

From https://developer.mozilla/en-US/docs/Web/API/CustomEvent:

It seems that events are now encapsulated in a class called CustomEvent. You can think of the old document.createEvent as a factory method that returns an event object. Now, instead of using document.createEvent to create the object, you now have access to create the object directly.

    //this is the new way
    var my_event = new CustomEvent('NewEventName');
    var my_element = document.getElementById('TargetElement');
    my_element.dispatchEvent(my_event);

is the replacement for

    //this is the old way
    var my_event = document.createEvent('NewEventName');
    var my_element = document.getElementById('TargetElement');
    my_element.dispatchEvent(my_event);

You want to use addEventListener()

https://developer.mozilla/en-US/docs/DOM/EventTarget.addEventListener

Here's my library code for attaching events, I found these on stackoverflow and put them inside of my app global namespace:

var app={}

app.listenEvent=function(eventTarget, eventType, eventHandler) { 
   if (eventTarget.addEventListener) {
      eventTarget.addEventListener(eventType, eventHandler,false); 
   } 
  else if (eventTarget.attachEvent) {
      eventType = "on" + eventType;
      eventTarget.attachEvent(eventType, eventHandler); 
  } 
  else {
     eventTarget["on" + eventType] = eventHandler; 
  }
}


app.cancelEvent=function(event) {
    if (event.preventDefault) 
       event.preventDefault()
    else 
       event.returnValue = false; 
}


app.cancelPropagation=function(event) {
    if (event.stopPropagation) { 
        event.stopPropagation();
    } else {
     event.cancelBubble = true; }
 }

So to add an listen for an event:

app.listenEvent(document.aform.afield, 'focus', function(){console.log(arguments)} )

These functions are great, they work in all browsers.