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

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

С учетом элемента:

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

Чтобы клиент подписался:

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

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

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

Ответ 4

Это Джон Ресиг:

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

Ответ 5

Я просто думал о назначении поддерживаемого обработчика в новое пространство имен, то есть ссылку на поддерживаемое событие. Код ниже работает (вставьте его в консоль 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);

Ответ 6

Это не так сложно на самом деле - не так много определений событий, только три версии. Первый - это corect one (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!');});

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