константы событий для JavaScript?

Question

В JavaScript у меня есть код, как

document.addEventListener("mousedown", mouseDownHandler);

и иногда я мог бы толстый палец что-то вроде

document.addEventListener("mouzedown", mouseDownHandler);

И javascript не узнает, что я идиот, и я запутаюсь, почему мой обработчик не работает.

Actionscript3 определяет такие константы событий как

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

Если у меня толстый палец variable или constant, тогда JS рассердится на меня, и я смогу решить проблему очень быстро. Имеет ли JavaScript что-то похожее на это или мне нужно создать свои собственные псевдоконстанты JS для типов событий?

Answer 1

Нет встроенной функции, чтобы сделать это для вас.

Вы можете создать свой собственный список событий:

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() и т. Д. И присоединять события только через эти методы - вы обязательно получите ошибку, если неправильно наберете имя метода.

Answer 2

Нет предопределенных констант / свойств, которые можно использовать для определения события для addEventListener.

Раздельный исходный ответ ниже (и в истории изменений ): Объект Event определил следующие константы.Использование Firefox 8.0 и следующий код:

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

Answer 3

Может быть, использовать jQuery?Большой переключатель для небольшой проблемы, но jQuery имеет псевдонимы для многих обработчиков JS, и если вы напишите неправильное имя функции, вы обязательно получите ошибку.

То есть

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

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