Dynamique.js - Documentation Event.js

Module Event

Ce module est dédié à la manipulation des événements. Il peut être utilisé indépendamment de Dynamique mais est aussi prévu pour s'y intégrer en tant que module.

Historiquement, les fonctions qui permettaient la manipulation des événements étaient définis dans le module DOM. A cette époque, DOM proposé alors des fonctions permettant la manipulation d'événements sur les objets où l'ajout d'événements pouvait se faire par propriété "onclick = ...", via la méthode addEventListener ou encore attachEvent, du temps ou les standards du web n'étaient pas encore bien encrés dans le développement des navigateurs. DOM facilitait l'utilisation des événements à travers des méthodes efficaces et assuré en plus aussi la compatibilité des événements en fonctions de l'environnement d'éxécution.

L'évolution du language et des standards ont ensuite permis le développement de nouvelles fonctionnalités concernant la manipulation des événements. Le code évoluant et DOM étant un fichier déjà d'une certaine taille, il a été jugé nécessaire de lui dédier un module.

Event s'organise autour de 6 axes:

Gestion basique des événements, méthodes: setEvent, removeEvent: permet l'ajout et la suppression d'événements sur des cibles données;
Gestion des événements par nom, méthodes: setEventByName, removeEventByName, enabledEventByName, disabledEventByName, callEventByName: permet la manipulation d'événement par nom associé.
Délégation d'événements, méthode setEventDelegation: ajoute un événement par principe de délégation (cet axe va être d'avantage développé dans le futur);
Sauvegarde d'événements, méthodes: saveEvent, deleteEvent, callEvent, getEvent: permet la manipulation d'événements par sauvegarde et suppression;
Evénements simulés, méthode createSimulateEvent: permet de simuler des événements tout en les traitant comme des événements natifs JavaScript.
Gestion d'événements sur des objets, méthode createEventObject: confère la capacité à des objets de recevoir des événements.

Chacun de ces axes peut fonctionner en totale autonomie. Lorsqu'il sont tous utilisés, leur fonctionnalités se complètent permettant par exemple à un évenement sauvegardé avec la méthode saveEvent d'être utilisé à la fois par la méthode setEvent mais aussi par la méthode setEventByName.
Le module Event génère aussi un ensemble de méthodes pour simplifier l'utilisation des événements. Consulter le paragraphe Méthodes et Plug-in générés pour plus de détails.

Accessibilité

Lorsque Event est utilisé sans Dynamique, il s'initialise directement sur l'objet window. Il est alors accessible tel que:


							Event.setEvent([document.body], ...);
							// ===
							window.Event.setEvent([document.body], ...);

Lorsque Event est utilisé avec Dynamique, il s'initialise en tant que module de Dynamique. Il y crée un certains nombre de plug-in dont la liste est défini au paragraphe Méthodes et Plug-in générés. Les méthodes (plug-in) du module Event sont alors accessible tel que:


							Dynamique([document.body]).setEvent(...);

Pour autant, les méthodes initiales du module restent tout de même accessible en suivant le chemin jusqu'à son emplacement, tel que défini par la documentation de Dynamique:


							Dynamique.module.Event.setEvent([document.body], ...);

Méthodes et Plug-in générés

Pour simplifier leur usage, une méthode est créé pour chacun des événements suivants:

Chacun de ces événements sont alors utilisable comme méthode en ajoutant la chaine on devant le nom de chacune d'entre elles:


							Event.setEvent([document.body"], "click", fct...);
							// ===
							Event.onClick.call([document.body], fct...);

Les avantages de cette techniques sont plus perceptibles lors de l'utilisation de Dynamique où ces méthodes sont alors ajoutées comme plug-in à Dynamique, rendant leur usage tel que:


							Dynamique(document.body).onClick(fct...);
							Dynamique(document.body).onRightClick(fct...);
							Dynamique(document.body).onScroll(fct...);
							// ===
							Dynamique(document.body).onClick(fct...).onRightClick(ftc...).onScroll(fct...);

Il en vas de mêmes pour les méthodes:

qui sont transformées en méthodes utilisables dans le contexte d'usage de Dynamique:


							Event.saveEvent("name", fct);
							Event.setEvent([document.body], "click", "name");
							// ===
							Dynamique(document.body).saveEvent("name", fct).setEvent("click", "name");
							// ===
							Dynamique(document.body).saveEvent("name", fct).onClick("name");

Génération d'événement comme plug-in

Ce paragraphe est valable uniquement lorsque le module Event est utilisé avec Dynamique.

Comme il est décris au paragraphe Méthodes et Plug-in générés, un ensemble de méthodes sont générées afin de simplifier l'usage des événements les plus courants. Lorsque Dynamique est utilisé avec Event, ces méthodes sont ajoutées comme plug-in à Dynamique. Si il est nécessaire pour votre usage d'ajouter des événements comme plug-in, vous pouvez utiliser la méthode createEventPlugIn qui s'en chargera pour vous. Vous trouverez ici sa documentation.


							Dynamique([document.body]).createEventPlugIn("AfterPrinting").onAfterPrinting(fct...);
							
							Dynamique([document.body]).createEventPlugIn("myCustomName", "AfterPrinting").onmyCustomName(fct...);

Compatibilité

Le module Event a été réalisé sous le standard EcmaScript 6.