javascript : événements - formations en informatique de lille | fil · 2014-11-10 · 1 placer...
Post on 18-Apr-2020
2 Views
Preview:
TRANSCRIPT
evenements
javascript : evenements
Universite Lille 1 Technologies du Web – javascript : evenements 1
evenements
evenements
Certaines actions sur des elements d’un document web generent unevenement.Un evenement caracterise l’action realisee et depend de l’element cible(sur lequel porte l’action).Il existe differents types d’evenements.
actions de l’utilisateur via le clavier ou la souris−→ click, keyup, mouseover, etc.changement d’etat−→ change, focuschargement d’un element−→ loadetc.
Universite Lille 1 Technologies du Web – javascript : evenements 2
evenements
programmation evenementielle
programmation evenementielleLa programmation evenementielle consiste a lier une fonction al’occurrence d’un evenement sur un element.On parle d’abonnement de la fonction a l’element pour l’evenement.La fonction est declenchee (executee) lorsque l’evenement se produitsur cet element cible (target).
fonction listenerLa fonction attachee a un evenement est appelee fonction« gestionnaire d’evenement » – event handler – ou « d’ecoute » –event listener .
Universite Lille 1 Technologies du Web – javascript : evenements 3
evenements
methode d’abonnement
addEventListenerLa methode addEventListener realise l’abonnement d’une fonctiona un evenement donne pour l’objet sur lequel elle est invoquee .
objet.addEventListener(eventType, listenerFunction)
objet : l’objet cible : window, ou un element de la pageeventType : une chaıne de caracteres designant l’evenementconcerne"click", "load", "change", "mouseover", "keypress" etc.listenerFunction : la fonction listener qui est appelee lorsquel’evenement se produit
Universite Lille 1 Technologies du Web – javascript : evenements 4
evenements
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
Universite Lille 1 Technologies du Web – javascript : evenements 5
evenements
1 var action1 = function () {2 window.alert("on a clique sur le pied de page");3 }45 // selection d’un element6 var pied = document.getElementById("piedDePage");7 // abonnement sur cet element de la fonction ’action1 ’8 // pour un evenement "click" => ’action ()’ declenchee si clic9 pied.addEventListener("click",action1);
exemple event1.html
Universite Lille 1 Technologies du Web – javascript : evenements 6
evenements
un peu de methodologie
ou placer les definitions des fonctions listeners ?quand et ou faire les abonnements ?
suggestion methodologique :1 placer les fonctions javascript dans un fichier a part de l’html2 definir une fonction setupListeners chargee de mettre en place
les abonnements :1 recuperer l’element cible2 abonner la fonction listener pour l’evenement voulu
3 declencher la fonction setupListenersdoit etre fait quand les elements existent, donc apres leur creationlorsque la page est completement chargee↪→ utilisation de l’evenement load sur window
exemple event2.html – temperature.htmlUniversite Lille 1 Technologies du Web – javascript : evenements 7
evenements
<html><head> ...
<script src="monscript.js"></script ></head><body> ...
<img id="monImage" ... /> ...<div id="piedDePage"> ... </div>...
exemple event2.htmltemperature.html
avec monscript.js :1 // fonction de mise en place des abonnements2 var setupListeners = function () {3 // abonnement pour element d’id "piedDePage"4 var pied = document.getElementById("piedDePage");5 pied.addEventListener("click",action1);6 // abonnement pour element d’id "monImage"7 var image = document.getElementById("monImage");8 image.addEventListener("mouseover",action2);9 }
10 // on provoque l’execution de "setupListeners" a la fin du11 // chargement du document12 window.addEventListener("load", setupListeners);13 // definition des fonctions d’ ecoute (listener)14 var action1 = function () { ... }15 var action2 = function () { ... }
Universite Lille 1 Technologies du Web – javascript : evenements 8
evenements
this
dans une fonction listener, la variable this est definie et designel’objet cible de l’evenementtypiquement un element du document
temperature.html
permet d’utiliser la meme fonction listener sur plusieurs elementsen contextualisant son action sur l’element cible
exemple this.html
Universite Lille 1 Technologies du Web – javascript : evenements 9
evenements
Sur un element donne on peut avoirplusieurs abonnements pour differents evenementsplusieurs abonnements pour le meme evenement
removeEventListenerla methode removeEventListener permet de desabonner de l’objetsur lequel elle est invoquee une fonction pour un evenementobjet.removeEventListener(eventType, listenerFunction)
exemple event3.html
Universite Lille 1 Technologies du Web – javascript : evenements 10
evenements
l’objet event
un objet event est cree pour chaque evenement.cet objet est passe en parametre a la fonction listener associee lorsde son appelle type d’objet event varie selon l’evenement.un objet event possede des proprietes qui informent surl’evenement.
Universite Lille 1 Technologies du Web – javascript : evenements 11
evenements
l’objet event
Quelques proprietes (selon les types d’evenements) :type le type de l’evenement,clientX, clientY – screenX, screenY – pageX, pageYcoordonnees de l’evenement par rapport au “navigateur” – l’ecran– la pagealtKey, ctrlKey, shiftKey l’une des touches Alt, Ctrl ou Shiftetait pressee lors de l’evenement ?key information sur la touche appuyeetarget la cible de l’evenement (== this)timestamp le moment de creation de l’evenementetc.
exemple event4.html exemple target.html
Universite Lille 1 Technologies du Web – javascript : evenements 12
evenements
versions precedentes
DOM niveau 0 :les gestionnaires d’evenements s’appellent onevent :onclick, onload, onmmouseover, etc.un gestionnaire d’evenement peut etre place en ligne en tant qu’attributd’un element, la valeur associee est le code execute
<img src="..." onclick="var i = 2; action();"/>on peut aussi creer l’abonnement dans le code javascript :
element.onclick = maFonction;defauts :
code javascript dans le code HTMLun seul abonnement possible par type d’evenement
Conclusionutiliser le modele addEventListener
attachEvent(...) dans IE < 8 (+ autres differences)Universite Lille 1 Technologies du Web – javascript : evenements 13
evenements
a suivre...
javascript : manipuler DOM
Universite Lille 1 Technologies du Web – javascript : evenements 14
top related