In Javascript I have code like:

document.addEventListener("mousedown", mouseDownHandler);

and occasionally I might fat finger something like:

document.addEventListener("mouzedown", mouseDownHandler);

And Javascript won't recognize that I'm a moron and I'll be confused why my handler isn't working.

Actionscript3 specifies event constants like so:

MouseEvent.MOUSE_DOWN // equiv to the String "mouseDown"

If I fat-finger a variable or constant then JS gets mad at me and I can solve the problem real quick. Does JavaScript have anything similar to to this or do I need to make my own JS pseudo-constants for event types?

In Javascript I have code like:

document.addEventListener("mousedown", mouseDownHandler);

and occasionally I might fat finger something like:

document.addEventListener("mouzedown", mouseDownHandler);

And Javascript won't recognize that I'm a moron and I'll be confused why my handler isn't working.

Actionscript3 specifies event constants like so:

MouseEvent.MOUSE_DOWN // equiv to the String "mouseDown"

If I fat-finger a variable or constant then JS gets mad at me and I can solve the problem real quick. Does JavaScript have anything similar to to this or do I need to make my own JS pseudo-constants for event types?

• javascript
• constants
• dom-events
• mouseevent

• Haha, yeah. In static languages, you get a piler error. In dynamic languages, strings are about as safe as variables. (Not quite though.) – Thomas Eding Commented Dec 8, 2011 at 22:35
• 1 I've personally never e across something like this, and a few minutes via Google hasn't provided me anything. I did however learn that JavaScript has a const keyword: developer.mozilla/en/JavaScript/Guide/… – peterp Commented Dec 8, 2011 at 22:36
• 2 @Diodeus JavaScript would plain about an undefined variable though; so typing it incorrectly would give you the desired result. – peterp Commented Dec 8, 2011 at 22:38
• 1 @peterp If you ask for MouseEvent.anythingGoesHere JavaScript will not plain; it will silently return undefined, which is accepted as a valid event name (at least on Chrome). This would only be valid if these were spammed as global variables. – Phrogz Commented Dec 8, 2011 at 22:52
• mouseDown is an event generated by a browser or other container that happens to be running a javascript interpreter... it means nothing to javascript. You can invent, fire, and handle your own events with any names you want, so a fixed predefined set is out. It would then be up to the environment (the browser) to pre-define some const strings for you to use. – Stephen P Commented Dec 8, 2011 at 22:54

3 Answers 3

There is no built-in feature to do this for you.

You could create your own list of events:

var EventNames = {
  MOUSE_DOWN : "mousedown",
  MOUSE_UP   : "mouseup",
  CLICK      : "click",
  // etc
};

But that doesn't protect you from typos because then EventNames.MOUZE_DOWN will just give you undefined (which will likely be accepted by addEventListener() but - obviously - not do what you want).

You could create a series of individual global variables and then the browser should give an error if you make a typo on the "constant" name (and your IDE or lint product may detect typos for you):

var Event_MOUSE_DOWN = "mousedown",
    Event_MOUSE_UP   = "mouseup",
    // etc

But of course members of the "globals are evil" brigade are already starting to froth at the mouth just from having read the above. You could do the above without globals by wrapping all of your code (including those "constants") in one big immediately-executed anonymous function, or you could instead do something like this:

// YNH: "Your Namespace Here" (insert your own namespacing
//                             code as desired)
var YNH_Events = {
   validEvents : ["mouseup","mousedown","click","etc"],

   bindEvent = function(element, eventType, handler, isCustomEvent) {
      if (!isCustomEvent && -1 === this.validEvents.indexOf(eventType))
         throw "Invalid event type requested: " + eventType;

      if (element.addEventListener)
         element.addEventListener(eventType, handler, false);
      else if (element.attachEvent)
         element.attachEvent("on" + eventType, handler);
      else
         element["on" + eventType] = handler;
   }
}

YNH_Events.bindEvent(someElement, "mousedown", function() { });         // OK
YNH_Events.bindEvent(someElement, "customevent", function() { }, true); // OK
YNH_Events.bindEvent(someElement, "mouzedown", function() { });     // Error!

Of course, the usual caveat about using Array.indexOf() applies, i.e., not supported in older browsers but you can shim it as described by MDN, blah, blah, blah.

Or you could do like jQuery and define your own .mousedown(), .click() etc methods and only attach events through those methods - you'll definitely get an error if you mistype the method name.

There are no predefined constants/properties which can be used as to define an event for addEventListener.

Stripped original answer below (and in the revision history):
The Event object defined the following constants. Using Firefox 8.0, and the following code:

• alert(Object.keys(Event).map(function(name){return name + "\t" + Event[name]}).join('\n'))

Maybe use jQuery? Big switch for a small problem, but jQuery has aliased functions for a lot of JS handlers, and if you spell a function name wrong you'll definitely get an error.

That is,

document.addEventListener("mousedown", mouseDownHandler); // right
$(document).mousedown(mouseDownHandler); // right

document.addEventListener("mouzedown", mouseDownHandler); // wrong, no error
$(document).mouzedown(mouseDownHandler); // wrong, throws error