javascript的事件常量？

Question

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?

Answer 1

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'))

Answer 2

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, ie, 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.

Answer 3

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