- Documentation
- >
- Modules
- >
- DOM
Module DOM
Ce module est dédié à la manipulation du DOM (Document Object Model).
Il peut être utilisé indépendamment de Dynamique.
Historiquement, les fonctions qui permettaient la manipulation des événements étaient définis dans ce module.
Depuis l'évolution du language et des standards la gestion des événements se fait à partir du module dédié Event.
DOM s'organise autour de 3 axes:
-
Manipulation (création, déplacement, suppression) d'élément DOM: setEvent;
-
Manipulation des classes de style: setEventByName;
-
Manipulation d'attributs et de propriétés: setEventByName.
Chacun de ces axes peut fonctionner en totale autonomie.
Accessibilité
Lorsque DOM est utilisé sans Dynamique, il s'initialise directement sur l'objet window.
Il est alors accessible tel que:
DOM.addClass(...);
// ===
window.DOM.addClass(...);
Lorsque DOM 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 DOM sont alors accessible tel que:
Dynamique([document.body]).addClass(...);
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.DOM.addClass([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:
- Ready
- RightClick
- MouseScroll
- Load
- UnLoad
- BeforeUnload
- Abort
- Error
- Click
- DblClick
- KeyDown
- KeyUp
- KeyPress
- MouseDown
- MouseUp
- MouseMove
- MouseOver
- MouseOut
- MouseEnter
- MouseLeave
- TouchStart
- TouchEnd
- TouchEnter
- TouchLeave
- TouchMove
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:
- setEvent
- removeEvent
- setEventByName
- removeEventByName
- callEventByName
- enabledEventByName
- disabledEventByName
- setEventDelegation
- saveEvent
- deleteEvent
- callEvent
- getEvent
- createEventObject
- createSimulateEvent
- createEventPlugIn
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");
Compatibilité
Le module Event a été réalisé sous le standard EcmaScript 6.
Dépendances
Le module Event n'a aucune dépendance externe.