javascript : événements - fil

´
ev´ enements
javascript : ´ev´enements
Universit´ e Lille 1 Technologies du Web – javascript : ´ ev´ enements 1

´
ev´ enements
´ev´enements
Certaines actions sur des ´ el´ ements d’un document web g´ en` erent un
´ev´enement.
Un ´ ev´ enement caract´ erise l’action r´ ealis´ ee et d´ epend de l’´ el´ ement cible
(sur lequel porte l’action).
Il existe diff´ erents types d’´ ev´ enements.
actions de l’utilisateur via le clavier ou la souris
−→ click,keyup,mouseover, etc.
changement d’´ etat
−→ change,focus
chargement d’un ´ el´ ement
−→ load
etc.
Universit´ e Lille 1 Technologies du Web – javascript : ´ ev´ enements 2

´
ev´ enements
programmation ´ev´enementielle
programmation ´ev´enementielle
La programmation ´ev´enementielle consiste ` a lier une fonction ` a
l’occurrence d’un ´ ev´ enement sur un ´ el´ ement.
On parle d’abonnement de la fonction ` a l’´ el´ ement pour l’´ ev´ enement.
La fonction est d´ eclench´ ee (ex´ ecut´ ee) lorsque l’´ ev´ enement se produit
sur cet ´ el´ ement cible (target).
fonction listener
La fonction attach´ ee ` a un ´ ev´ enement est appel´ ee fonction
« gestionnaire d’´ ev´ enement » – event handler – ou « d’´ ecoute » –
event listener.
Universit´ e Lille 1 Technologies du Web – javascript : ´ ev´ enements 3

´
ev´ enements
m´ethode d’abonnement
addEventListener
La m´ ethode addEventListener r´ ealise l’abonnement d’une fonction
`
a un ´ ev´ enement donn´ e pour l’objet sur lequel elle est invoqu´ ee .
objet.addEventListener(eventType,listenerFunction)
objet : l’objet cibl´ e : window, ou un ´ el´ ement de la page
eventType : une cha
ˆ
ıne de caract` eres d´ esignant l’´ ev´ enement
concern´ e
"click","load","change","mouseover","keypress" etc.
listenerFunction : la fonction listener qui est appel´ ee lorsque
l’´ ev´ enement se produit
Universit´ e Lille 1 Technologies du Web – javascript : ´ ev´ enements 4

´
ev´ enements
attention
!
lors d’un abonnement
objet.addEventListener(eventType,listenerFunction)
listenerFunction est une valeur de type fonction,
ce n’est pas l’appel de la fonction
Universit´ e Lille 1 Technologies du Web – javascript : ´ ev´ enements 5