Comment créer une classe d'événement personnalisée en Javascript ?

Question

Comment créer une classe d'événement personnalisée similaire à ActionScript ? Par là, j'entends une classe que je peux utiliser pour déclencher mes propres événements et envoyer les données nécessaires.

Je ne veux pas utiliser des bibliothèques tierces comme YUI ou jQuery pour le faire. Mon objectif est de pouvoir envoyer un événement qui ressemble à cela :

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

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

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

Veuillez pas de solutions de bibliothèque tierce.

Answer 1

Une méthode qui a fonctionné pour moi était d'appeler document.createEvent(), de l'initialiser et de le déclencher avec window.dispatchEvent().

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

Answer 2

Je suis un peu en retard pour la fête ici, mais je cherchais la même chose. Je ne suis pas enthousiaste à l'idée de la première réponse (ci-dessus) car elle repose sur le document pour gérer l'événement personnalisé. C'est dangereux car c'est global et pourrait potentiellement entrer en conflit avec un autre script si ce script repose accidentellement sur le même événement personnalisé.

La meilleure solution que j'ai trouvée est ici : Nicholas C. Zakas - Événements personnalisés en Javascript

Malheureusement, comme javascript ne supporte pas les mots-clés d'héritage, c'est un peu désordonné avec le prototypage, mais cela garde certainement les choses bien rangées.

Answer 3

Ceci est de 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 );
}

Plus sur son article de blog à http://ejohn.org/projects/flexible-javascript-events/.

Answer 4

Je pensais simplement à attribuer un gestionnaire pris en charge à un nouveau espace de noms, c'est-à-dire une référence à un événement pris en charge. Le code ci-dessous fonctionne (collez-le dans la console de Chrome) mais vous pouvez l'écrire dans un format meilleur, et vous devriez avoir des méthodes d'aide supplémentaires (qui peuvent se redéfinir également), pour le support xBrowser, et pour le sniffing des types de support (après avoir détecté quel chemin utiliser, vous devrez faire redéfinir la fonction elle-même. J'espère que ce que j'ai ci-dessous vous aide.

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

En fait, ce n'est pas si difficile - il n'y a pas tant de définitions d'événements, seulement trois versions. La première est la bonne (addEventListener), ensuite il y a la méthode IE (attachEvent) et enfin la méthode de compatibilité pour les anciens navigateurs (element.onevent = fonction)

Une solution de gestion d'événements complète ressemblerait à ceci :

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{
    // compatibilité
    elm['on'+eventName] = handler;
  }
}

et pour effacer les événements :

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{
    // compatibilité
    elm['on'+eventName] = null;
  }
}

et un exemple:

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

Ce n'est pas vraiment un exemple complet cependant, car le gestionnaire de compatibilité écrase toujours les événements précédents (il ne les ajoute pas, il les remplace), donc vous voudriez probablement vérifier si un gestionnaire est déjà défini, puis le sauvegarder dans une variable temporaire et l'exécuter à l'intérieur de la fonction gestionnaire d'événements.