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

Event.setEvent

Assigne un ensemble d'événements à un ensemble de noeuds DOM.

Synthaxe

Event.setEvent(domList, eventString, eventFct1[, ..., eventFctN][, capture]);
Event.setEvent(domList, eventString, eventFct1[, ..., eventFctN][, option]);
Event.setEvent(domList, objt1[, ..., objtN][, capture]);
Event.setEvent(domList, 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.

  • 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 en ligne

L'exemple ci-dessous associe deux fonctions qui afficheront dans l'ordre dans la console "Event fired function 1 !" et "Event fired function 2 !" lorsque l'utilisateur clique, déplace sa souris ou effectue un clique droit sur le noeud DOM body. Comme précisé à la section Synthaxe, les événements auquels doivent être associés les fonctions sont des chaines de caractères séparées par des espaces (" "), commençant ou non par "on" et n'étant pas sensible à la casse.

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

Exemple 2: Ajout d'événements par objets

L'équivalent du premier exemple utilisant la synthaxe supportant les objets est présenté ci-dessous.

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

Exemple 3: Utilisation de paramètres

Il est aussi possible de transmettre des paramètres en dernier argument. Ces paramètres doivent être soit utilisés par un événement simulé soit utilisés par la méthode DomElement.addEventListener soit les deux. Ici, on ajoute le paramètre once qui, d'après la documentation, fera en sorte que les fonctions ne soient éxécutées que la première fois de leur appel.

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

Exemple 4: Utilisation de paramètres avec des objets

Dans le cas d'utilisation de la synthaxe supportant les objets et l'utilisation de paramètre, il est nécessaire d'utiliser un tel qu'exposé ci-dessous.

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

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 1 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

  • Méthode removeEvent: Supprime un ensemble d'événements d'un ensemble de noeuds DOM.