Dernière mise à jour le .
  1. Documentation
  2. >
  3. Modules
  4. >
  5. Event
  6. >
  7. createEventObject

Event.createEventObject

Ajoute à un objet les méthodes permettant le support de l'interface EventListener. Il sera alors possible d'ajouter et de déclencher des événements sur cet objet comme il est possible de le faire sur certains objets comme window, document ou encore Element.

Synthaxe

Event.createEventObject(target, defaultProp)

Où:

  • target : objet cible auquel sera ajouté les méthodes décrites dans le paragraphe Méthodes ajoutées.

  • defaultProp : objet tel que chaque propriété est le nom d'un événement avec ou sans on et insensible à la casse et ayant pour valeur soit une soit un valant false. Si la valeur est une , celle-ci est appelée une unique fois afin de définir les arguments à transmettre aux écouteurs d'événements lorsque l'événement du nom de sa propriété est appelée via la méthode dispatchEvent. Pour chaque propriété sera aussi créé à l'objet cible target une nouvelle propriété sous la forme on + nom de l'événement tout en minuscule et à laquelle l'assignation d'une fonction l'associera à l'événement du nom de la propriété. Ainsi, il sera possible de définir des événements tel que monObjet.onmonevenement = maFonction;. En utilisant cette méthode d'ajout d'événement, la nouvelle assignation d'une fonction à cette propriété supprimera la fonction préalablement assignée de l'événement.

Méthodes ajoutées

  • .addEventListener

    Associe une ou un ensemble de fonctions à un événement.
    Synthaxe:

    target.addEventListener(eventName, fct0[, ..., fctN])

    Où:

    • eventName : nom de l'événement à écouter.

    • fct0...fctN : fonction javascript qui sera déclenchée lorsque l'événement survient.

  • .removeEventListener

    Supprime l'association d'une ou d'un ensemble de fonctions à un événement préalablement ajoutées via la méthode target.addEventListener.
    Synthaxe:

    target.removeEventListener(eventName, fct0[, ..., fctN])

    Où:

    • eventName : nom de l'événement pour lequel il faut supprimer un écouteur d'événements.

    • fct0...fctN : fonction javascript à retirer de la cible.

  • .dispatchEvent

    Déclenche un événement.
    Synthaxe:

    target.dispatchEvent(eventName, arg0[, ..., argN])

    Où:

    • eventName : nom de l'événement qu'il faut déclencher.

    • arg0...argN : arguments qui seront transmis aux écouteurs d'événements ou, si une fonction à été défini pour le nom de l'événement donné dans l'objet defaultProp, arguments qui seront utilisé avec cette fonction.

  • .redispatchOnNewHandler

    Indique si une fonction associée à un événement après qu'il ait déjà été déclenché doit être déclenchée immédiatement.
    Synthaxe:

    target.redispatchOnNewHandler(eventName, state)

    Où:

    • eventName : nom de l'événement concerné, avec ou sans on et étant insensible à la casse.

    • state : true si pour l'événement donné eventName les prochaines associations à cet événement devront être déclenchées immédiatement ou false sinon.

  • .importEvent

    Importe des événements depuis un ou plusieurs objets cibles. Toutes les propriétés correspondantes à des événements alors supportés par la source seront importées/copiées depuis les objets cibles donnés. Les objets cibles ne subissent aucune modification.
    Synthaxe:

    target.importEvent(from0[, ..., fromN])

    Où:

    • from0...fromN : objet dont les propriétés seront parcourues et qui seront copiées si elles sont supportées par la source.

  • .copyEventTo

    Copie des fonctions associées à des événements depuis un objet à un autre.
    Synthaxe:

    target.copyEventTo(objt, filter, ret)

    Où:

    • objt : objet auquel il faut copier les fonctions.

    • filter Facultatif: fonction pouvant être utilisée afin de filtrer les fonctions devant être copiées ou non. La fonction prend en premier argument une fonction et en second argument le nom de l'événement auquel la fonction donné en premier argument est associée. La fonction doit retourner truesi l'événement doit être copié ou false sinon. Si filter est omis ou vaut l'équivalent de false, alors aucun filtrage n'est appliquée et toutes les fonctions copiées.

    • state Facultatif: true si objt doit être retourné ou false si target doit être retourné. Par défaut: false.

Valeur de retour

Retourne target.

Exemple avec ou sans Dynamique

Exemple 1: Usage basique

L'exemple ci-dessous crée un nouvel objet auquel il va être possible d'ajouter puis de déclencher des événements.

// Avec dynamique: // const myObject = Dynamique.module.Event.createEventObject({}); // Sans dynamique: const myObject = Event.createEventObject({}); myObject.addEventListener("click", function(/* arguments éventuels fournis par dispatchEvent */) { console.log("Call n°1, arguments:", arguments); }/*, function() { ... }, ...*/); myObject.dispatchEvent("onClIck"/*, arguments à utiliser */); // On indique que le prochain événement "click" qui sera ajouté devra être appelé directement myObject.redispatchOnNewHandler("click", true); myObject.addEventListener("click", function(/* déclenchement automatique, aucun arguments sauf si defaultProp utilisé, voir exemple 2 */) { console.log("Call n°2, arguments:", arguments); }); // En console, les deux messages seront visibles bien que dispatchEvent n'est été appellé qu'une fois.

Exemple 2: Usage avancé

L'exemple ci-dessous crée un nouvel objet auquel il va être possible d'ajouter puis de déclencher des événements en utilisant addEventListener ou la méthode en ligne.

// Avec dynamique: // const myObject = Dynamique.module.Event.createEventObject(...); // Sans dynamique: const myObject = Event.createEventObject({}, { myEvent1 : false, onMyEvent2 : function(/* arguments éventuels fournies par dispatchEvent */) { // Le résultat de cette fonction sera fournis aux fonctions associées à l'événement "myevent2" return new CustomEvent("myEvent2"); } }); myObject.addEventListener("myEvent1", function(/* arguments éventuels fournis par dispatchEvent */) { console.log("Call n°1", arguments); }/*, function() { ... }, ...*/); myObject.dispatchEvent("myEvent1"/*, arguments à utiliser */); // Affiche en console "Call n°1" // Ajoute un événement de manière en ligne myObject.myEvent1 = (/* arguments éventuels fournis par dispatchEvent */) => console.log("Call n°2"); // Remplace l'événement de manière en ligne myObject.myEvent1 = (/* ... */) => console.log("Call n°3"); myObject.dispatchEvent("myEvent1"); // Affiche en console "Call n°1" et "Call n°3" myObject.addEventListener("onMyEvent2", function(/* 1 argument: le CustomEvent créé par la fonction définie plus haut */) { console.log("Call n°4", arguments); }); myObject.redispatchOnNewHandler("onMyEvent2", true); myObject.addEventListener("onMyEvent2", function(/* toujours le CustomEvent créé par la fonction définie plus haut */) { console.log("Call n°5", arguments); }); // Affiche en console "Call n°5" car redispatchOnNewHandler("onMyEvent2", true) indique que la fonction doit être appellée de suite // lors de l'ajout d'une nouvelle fonction à l'événement "myevent2" myObject.dispatchEvent("MyEvEnT2"); // Affiche en console "Call n°4" et "Call n°5"

Compatibilité

Méthode codée en EcmaScript 6.