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

Event.setEventByName

Assigne un ensemble d'événements associés à un nom à un ensemble de noeuds DOM.
L'assignation d'événements par nom simplifie leur manipulation lorsqu'ils sont susceptible d'être ajoutés, supprimés, activés ou désactivés régulièrement.
Les méthodes "ByName" suivent le même comportement que la fonction setEvent.

Synthaxe

Event.setEventByName(domList, assocName, eventString, eventFct1[, ..., eventFctN][, capture]);
Event.setEventByName(domList, assocName, eventString, eventFct1[, ..., eventFctN][, option]);
Event.setEventByName(domList, assocName, objt1[, ..., objtN][, capture]);
Event.setEventByName(domList, assocName, objt1[, ..., objtN][, hasOption, option]);

Lorsque le module Event est utilisé avec Dynamique.js, le paramètre domList doit être omis car il est remplacé par la valeur this fourni à la fonction.

Où:

  • domList : tableau contenant un ou plusieurs noeuds DOM sur lesquels il faut ajouter un ou plusieurs événements. Les noeuds ne supportant pas la méthode DomElement.addEventListener seront ignorés. Utilisez le sous-module Compatibility.eventListener afin d'étendre la compatibilité du module.

  • assocName : chaine de charactère représentant un nom à associer à l'ensemble des fonctions eventFct...eventFctN pour chaque eventString.

  • eventString : chaine de charactère définissant un ou plusieurs événements séparés par un unique espace (" ") donc chacun commence ou non par "on" et étant insensible à la casse.

  • eventFct1...eventFctN []: fonction ou tableau de fonction à associer avec le ou les événements définis par eventString.

  • capture Facultatif: correspond à la valeur de capture à utiliser avec ma méthode DomElement.addEventListener. Consulter sa documentation pour plus de détails.

  • option Facultatif: objet facultatif possédant des propriétés définies soit par la méthode DomElement.addEventListener soit par un événement simulé donné. Consultez les nécessités aux fonctionnements des événements simulés utilisés pour en savoir plus.

  • objt1...objtN : sont des objets dont les propriétés suivent la définition { eventString : eventFct } ou { eventString : [eventFct[, ..., eventFctN]] }.

  • hasOption Facultatif: défini si un objet de paramétrage est fourni lors de l'appel de la fonction. Il a été mis en place car il est impossible de différencier des objets d'options

Valeur de retour

Le tableau domList est retourné.

Exemple sans Dynamique

Exemple 1: Ajout d'événements par nom

L'exemple ci-dessous associe deux fonctions au nom myEventName pour les événements click mousemove rightclick à document.body. Ces événements pourront alors être supprimés, activés ou désactivés plus simplement par la suite du code et ceux sans avoir eu besoins de se soucier du stockage dans un context de ces événements.

Event.setEventByName([document.body], "myEventName", "click onmousemove onRightclIcK", function() { console.log("Event fired function 1 !"); }, function() { console.log("Event fired function 2 !"); }); Event.disabledEventByName([document.body], "myEventName"); // Les événements sont supprimés temporairement Event.enabledEventByName([document.body], "myEventName"); // Les événements sont ré-assignés Event.removeEventByName([document.body], "myEventName"); // Les événements sont supprimés définitivement

Exemple 2: Ajout d'événements par nom avec un objet

Les méthodes "ByName" suivent le même comportement que la fonction setEvent. L'équivalent du premier exemple utilisant la synthaxe supportant les objets est présenté ci-dessous.

Event.setEventByName([document.body], "myEventName", { "click onmousemove onRightclIcK" : [function() { console.log("Event fired function 1 !"); }, function() { console.log("Event fired function 2 !"); }] });

Exemple avec Dynamique

Lorsque le module est utilisé avec Dynamique.js, le fonctionnement des méthodes est identique mais le premier argument est à omettre, puisque c'est Dynamique lui même qui se charge de transmettre les noeuds DOM concernés. Le code ci-dessous reprend l'exemple 2 mais avec l'utilisation de Dynamique.

Dynamique(document.body).setEventByName("myEventName", { "click onmousemove onRightclIcK" : [function() { console.log("Event fired function 1 !"); }, function() { console.log("Event fired function 2 !"); }] });

Compatibilité

La prise en charge de DomElement.addEventListener ou l'utilisation d'un PolyFill équivalent est nécessaire. Méthode codée en EcmaScript 6.

Méthodes liées