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