¿Cómo creo una clase de evento personalizada en Javascript?

Question

¿Cómo creo una clase de evento personalizada similar a ActionScript? Lo que quiero decir con eso es una clase que puedo utilizar para disparar mis propios eventos, enviar los datos necesarios.

No quiero utilizar bibliotecas de terceros como YUI o jQuery para hacerlo. Mi objetivo es poder enviar un evento que se vea así.

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

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

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

No hay soluciones de bibliotecas de terceros.

Answer 1

Un método que funcionó para mí fue llamar a document.createEvent(), iniciarlo y despacharlo con window.dispatchEvent().

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

Answer 2

No es tan difícil en realidad, no hay tantas definiciones de eventos, solo tres versiones. La primera de ellas es la corecta (addEventListener), entonces no es la forma en IE (attachEvent) y luego está la forma en la compatibilidad de navegador antiguo (element.onevent = function)

Así que una solución de gestión de eventos completa sería algo como esto:

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; 
    } 
} 

y para borrar eventos:

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; 
    } 
} 

y un ejemplo:

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

Esto no es realmente un ejemplo completo, ya que el controlador de compatibilidad siempre sobrescribe los eventos anteriores (no se añaden acciones, se sobrescribe) por lo que probablemente desee comprobar si un controlador ya está configurado y luego guardarlo en alguna variable temporal y dispararlo dentro de la función del controlador de eventos.

Answer 3

Esto por John Resig:

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); 
} 

Más contenido en su blog en http://ejohn.org/projects/flexible-javascript-events/.

Answer 4

Llego un poco tarde a la fiesta aquí, pero estaba buscando lo mismo. No estoy interesado en la primera respuesta (arriba) porque depende del documento para administrar el evento personalizado. Esto es peligroso porque es global y podría entrar en conflicto con otra secuencia de comandos en caso de que esa secuencia de comandos dependa casualmente del mismo evento personalizado.

La mejor solución que he encontrado es aquí: Nicholas C. Zakas - Custom Events in Javascript

desgracia, ya que Javascript no es compatible con palabras clave de herencia, que es un poco desordenada, con la creación de prototipos, pero sin duda mantiene las cosas ordenadas.

Answer 5

Estaba pensando en asignar un controlador admitido a un nuevo espacio de nombres, es decir, una referencia a un evento admitido. El siguiente código funciona (péguelo en la consola de Chrome) pero puede escribirlo en un formato mejor, y debe tener métodos de ayuda adicionales (que también pueden redefinirse), para el soporte de xBrowser y para olfatear tipos de soporte (que después que ha detectado cuál es el camino de usar, que tendrá la función de redefinirse. Espero que lo que tienen debajo de ayuda.

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 6

Esto es sencillo cuando se utilizan elementos DOM para negociar los eventos.

Dado un elemento:

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

Para un cliente para suscribirse:

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

Luego de expedición/subir/desencadenar el evento, utilice este código:

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