Как мне создать собственный класс событий в Javascript?

Question

Как мне создать собственный класс событий, похожий на ActionScript? Под этим я подразумеваю класс, который я могу использовать для запуска своих собственных событий и отправки необходимых данных.

Я не хочу использовать сторонние библиотеки, такие как YUI или jQuery, чтобы сделать это. Моя цель - иметь возможность отправить событие, которое выглядит следующим образом.

document.addEventListener("customEvent", eventHandler, false);

function eventHandler(e){
    alert(e.para1);
}

document.dispatchEvent(new CustomEvent("customEvent", para1, para2));

Пожалуйста, не используйте сторонние библиотечные решения.

Answer 1

Метод, который работал для меня, состоял в том, чтобы вызвать document.createEvent (), инициировать его и отправить с помощью window.dispatchEvent ().

  var event = document.createEvent("Event");
  event.initEvent("customEvent", true, true);
  event.customData = getYourCustomData();
  window.dispatchEvent(event);

Answer 2

Я немного опоздал на вечеринку здесь, но искал то же самое. Я не заинтересован в первом ответе (выше), потому что он опирается на документ для управления пользовательским событием. Это опасно, потому что оно глобально и может конфликтовать с другим сценарием, если этот сценарий по совпадению полагается на то же пользовательское событие.

Лучшее решение, которое я нашел, здесь: Николас С. Закас - Пользовательские события в Javascript

К сожалению, поскольку javascript не поддерживает ключевые слова наследования, он немного запутан в прототипировании, но он определенно поддерживает порядок.

Answer 3

Это просто при использовании элементов DOM для брокера событий.

Учитывая элемент:

var element = document.querySelector('div#rocket');

Для подписки клиента:

element.addEventListener('liftoff', function(e)
{
    console.log('We have liftoff!');
});

Затем, чтобы отправить / поднять / запустить событие, используйте этот код:

element.dispatch(new Event('liftoff'));

Answer 4

Я просто думал о назначении поддерживаемого обработчика для нового пространства имен, то есть ссылки на поддерживаемое событие. Приведенный ниже код работает (вставьте его в консоль Chrome), но вы можете написать его в лучшем формате, и у вас должны быть дополнительные вспомогательные методы (которые также могут переопределять себя), для поддержки xBrowser и для типов поддержки сниффинга (которые после вы определили, какой путь использовать, у вас будет функция переопределить себя. Надеюсь, то, что у меня есть ниже, поможет.

var de = document.documentElement || document.getElementsByTagName[0];

function all(){ console.log('all') };

var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() {
    return ({
            customEvent: function() {
                if ('onclick' in de ) {
                    return 'click';
                }
            },
            init: function(){ return this.customEvent(); }
        }).init();
}();

de.addEventListener(customEventForSomeSpecificElement, all, false);

Answer 5

Это от Джона Резига:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

Подробнее в своем блоге на http://ejohn.org/projects/flexible-javascript-events/.

Answer 6

На самом деле это не так сложно - не так много определений событий, только три версии. Первый - основной (addEventListener), затем есть путь IE (attachEvent), а затем есть способ совместимости с более старым браузером (element.onevent = function)

Таким образом, полное решение для обработки событий будет выглядеть примерно так:

setEvent = function(element, eventName, handler){
  if('addEventListener' in element){
    //W3
    element.addEventListener(eventName,handler,false);
  }else if('attachEvent' in elm){
    //IE
    elm.attachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = handler;
  }
}

и очистить события:

clearEvent = function(element, eventName, handler){
  if('removeEventListener' in element){
    //W3
    element.removeEventListener(eventName,handler,false);
  }else if('detachEvent' in elm){
    //IE
    elm.detachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = null;
  }
}

и пример:

setEvent(document, "click", function(){alert('hello world!');});
clearEvent(document, "click", function(){alert('hello world!');});

Это на самом деле не полный пример, хотя обработчик совместимости всегда перезаписывает предыдущие события (это не добавление действий, а перезапись), так что вы, возможно, захотите проверить, установлен ли обработчик, и затем сохранить его во некоторой временной переменной и запустите его внутри функции обработчика событий.