Javascript的事件常量?

在Javascript中,我有如下代码:

document.addEventListener("mousedown", mouseDownHandler);

偶尔我可能会手指发胖,比如:

document.addEventListener("mouzedown", mouseDownHandler);

而且Javascript不会识别我是个白痴,我会弄糊涂为什么我的处理程序不工作。

Actionscript3如下指定事件常量:

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

如果我对variableconstant指手画脚,那么JS就会生我的气,我就能很快解决这个问题。JavaScript是否有类似于此的内容,或者我是否需要为事件类型创建自己的JS伪常量?


解决方案

没有为您执行此操作的内置功能。

您可以创建自己的事件列表:

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

但这并不能防止您输入错误,因为那样EventNames.MOUZE_DOWN只会给您undefined(addEventListener()可能会接受,但-显然-不会做您想做的事)。

您可以创建一系列单独的全局变量,然后如果您在"常量"名称上输入错误(并且您的IDE或LINT产品可能会为您检测到输入错误),浏览器就会给出错误:

var Event_MOUSE_DOWN = "mousedown",
    Event_MOUSE_UP   = "mouseup",
    // etc
但是,当然,"全球是邪恶的"大队的成员们仅仅读了上面的话就已经开始口吐白沫了。您可以在没有全局变量的情况下通过将所有代码(包括那些"常量")包装在一个立即执行的大型匿名函数中来完成上述操作,或者您也可以这样做:

// 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!

当然,有关使用Array.indexOf()的常见警告也适用,即在较旧的浏览器中不受支持,但您可以按照MDN、诸如此类的说明进行填补。

或者您可以像jQuery一样定义您自己的.mousedown().click()等方法,并且只通过这些方法附加事件-如果您输入了错误的方法名称,您肯定会收到错误。

相关文章