What is a good example of using event constructors in js?

Question

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.org/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?

just a note. Sometime the deprecated way in *one* browser is still the most widely supported on all browsers available. — gcb, Jul 07 '13 at 05:06

score 9 · Accepted Answer · answered Jun 25 '13 at 06:16

From https://developer.mozilla.org/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);

score -1 · Answer 2 · answered Apr 12 '13 at 05:00

-1

You want to use addEventListener()

https://developer.mozilla.org/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.

answered Apr 12 '13 at 05:00

Brian McGinity

5,777
5
36
46

4

Your answer misses the point. OP asked about means to programmatically create events, not attaching event listeners. – timkg Jun 05 '13 at 16:33
Pretty critical remark. I showed how to create an event which calls console.log() when a particular form receives focus. What do you think the OP is asking? onfocus is an event, onkeydown is an event, you cannot create your own event like onPowerOff. – Brian McGinity Jun 06 '13 at 07:21
2

Sorry if I offended you. OP wants to fire his own events programmatically. You can create (= fire new) events that normally only occur through user interaction. I can create a "click" event on an element, just as if a user had clicked on the element. That is what OP is asking about. EDIT You said "I showed how to create an event which calls console.log() when a particular form receives focus." -> No, you showed how to **attach an event handler**, not how to **create** an event. – timkg Jun 06 '13 at 09:05
2

You can check out [this question](http://stackoverflow.com/questions/5713393/creating-and-firing-touch-events-on-a-touch-enabled-browser) to see an example of creating new events. – timkg Jun 06 '13 at 09:11

What is a good example of using event constructors in js?

2 Answers2

Linked