Apprendre Javascript pour rendre vos pages Web interactives
Page 7: Les événements en Javascript
Toutes les pages 
Apprendre Javascript pour rendre vos pages Web interactives
Page 7
Les événements en Javascript
Les événements en Javascript
Javascript: un langage événementiel
Javascript est un langage événementiel. Donc les scripts déclarés dans la page ne sont pas destinés à s’exécuter séquentiellement, linge après ligne, du début à la fin. Mais ils attendent jusqu'à ce qu'un événement soit détecté pour qu'une partie du code s’exécute.Un événement est une action de l'utilisateur qui peut se produire sur le navigateur. Le plus célèbre est sans doute le clic qui peut survenir sur un objet quelconque (hyperlien, image, bouton...). Le navigateur écoute les événements qui se produisent sur la page Web puis les transmet au script par le biais de ce que l'on appelle le gestionnaire d' événements.
Gestionnaire d'événements
Le gestionnaire d'événements permet d'associer un traitement à un événement. Sa syntaxe respecte la forme suivante:onEvénement = "code Javascript édité directement ici, ou fonction appelée à cet endroit"
Il faut noter que onEvénement est un attribut HTML, et ce qui est entre les guillemets est sa valeur. Donc la ligne précédente est intégrée directement dans une balise HTML. Cependant, même si ce qui se trouve entre les guillemets est purement du code Javascript, nous ne le mettons pas dans les tags de script (<script> et </script>).
Il est très rare où on déclare directement la suite d'instructions Javascript à exécuter entre les guillemets. En général, on y appelle une fonction qu'on a déjà déclaré avant dans la balise <head>. Ainsi nous séparons les code HTML et Javascript ce qui rend le code plus lisible et plus facile maintenir.
Faisons un exemple pour mieux comprendre comment associer une action Javascript à l'événement click capturé sur un bouton HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert("Vous avez bien cliqué sur le bouton!");
}
</script>
</head>
<body>
<input type="button" value="Cliquez ici" onClick="f()" />
</body>
</html>
Le fait de cliquer sur le bouton donne naissance à l’événement click qui appellera (grâce au gestionnaire d'événements) la fonction f() définie dans le <head>. On aura donc le message "Vous avez bien cliqué sur le bouton!" qui s'affichera dans une boite de dialogue alert().
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert("Vous avez bien cliqué sur le bouton!");
}
</script>
</head>
<body>
<input type="button" value="Cliquez ici" onClick="f()" />
</body>
</html>
Vous avez peut être remarqué qu'on a écrit onClick avec le C de Click en majuscule. Puisque c'est un attribut HTML, alors il ne vérifie pas la casse (pas de distinction entre les minuscules et les majuscules), alors on peut écrire onclick ou ONCLICK. Cependant, il est pour coutume de capitaliser le premier caractère après le "on" ou de capitaliser les initiaux des noms d'événements composés comme onKeyUp ou onMouseOver.
Notez qu'il existe d'autres méthodes qui permettent de manipuler les gestionnaires d'événements surtout sur des objets HTML créés dynamiquement. On traitera ces méthodes dans la partie consacrée au DOM (Document Objet Model).
Liste des événements Javascript
Il existe des dizaines et des dizaines d'événement en Javascript. Certains sont très anciens mais sont toujours actifs sur les navigateurs récents, d'autres ont été intégrés suite à l’avènement de HTML5 et d'autres sont utiles si on se sert d'AJAX (Asynchronous Javascript And XML).Dans cette liste, nous allons voir les événements les plus utilisés en Javascript. Cependant, on aura l'occasion d'en voir d'autres dans d'autres cours (comme AJAX):
click (onClick)
Cet événement est capturé sur un objet quand on clique dessus. Idéal pour les boutons, images, hyperliens, vidéos...
dblClick (onDblClick)
Quand on clique sur un objet deux fois de suite (double clic).
mouseOver (onMouseOver)
Quand on survole un objet avec le curseur de la sourie.
mouseOut (onMouseOut)
Quand on quitte l'objet avec la sourie après l'avoir survolé.
focus (onFocus)
Quand on active un élément (quand on place le curseur dans un champ de formulaire, par click ou par tabulation, pour commencer la saisie par exemple).
blur (onBlur)
Quand un élément perd le focus (quitter un champ de formulaire après être activé par exemple).
keyDown (onKeyDown)
Quand une touche du clavier est enfoncée.
keyUp (onKeyUp)
Quand une touche du clavier est relâchée.
keyPress (onKeyPress)
Quand une touche du clavier est maintenue enfoncée.
load (onLoad)
Quand un élément est chargé par le navigateur. Elle peut être appliquée à la page entière (balise <body>), dans ce cas l'événement se produira quand tous les éléments de la page seront chargés.
unLoad (onUnload)
Quand la page en cours est fermée ou quittée.
resize (onResize)
Quand l'internaute redimensionne la taille de la fenêtre du navigateur.
select (onSelect)
Quand l'internaute essaie de sélectionner le texte contenu dans l'objet accueillant l’événement.
change (onChange)
Quand l'internaute change le contenu d'un élément (liste de sélection ou zone de texte par exemple).
submit (onSubmit)
Quand l'internaute clique sur n'importe quel bouton de type submit présent dans la page (ou dans le formulaire).
mouseDown (onMouseDown)
Quand l’internaute appuie sur n'importe quel bouton de la souris.
mouseUp (onMouseUP)
Quand le bouton de la souris et relâché.
mouseMove (onMouseMove)
Quand l’internaute fait bouger le curseur de la souris dans la zone accueillant l'événement.
dragStart (onDragStart)
Se produit quand l'internaute commence le déplacement d'un élément par "glisser-déposer" (Drag & Drop).
dragEnter (onDragEnter)
Se produit quand l'internaute entre dans la zone où sera déposé l'élément glissé.
dragOver (onDragOver)
Se produit quand l'internaute survole la zone où sera déposé l'élément glissé (même si le concept est proche de celui de onDragEnter, ils sont des événements légèrement différents).
drop (onDrop)
Se produit quand l'internaute dépose l'élément glissé dans la zone prévue à cet effet.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert("Vous avez cliqué sur le bouton 1.");
}
function g(){
alert("Vous avez survolé le bouton 2.");
}
function h(){
alert("Vous avez cliqué 2 fois sur le bouton 3.");
}
</script>
</head>
<body onLoad="alert('Page chargée.')">
<input type="button" value="Bouton 1" onClick="f()" /><br />
<input type="button" value="Bouton 2" onMouseOver="g()" /><br />
<input type="button" value="Bouton 3" onDblClick="h()" /><br />
</body>
</html>
Si on clique une fois sur le premier bouton la fonction f() est appelée et affiche le message "Vous avez cliqué sur le bouton 1.". Si on survole le deuxième bouton, la fonction g() est appelée et affiche "Vous avez survolé le bouton 2." et si on clique deux fois sur le troisième bouton la fonction h() est appelée et affiche "Vous avez cliqué 2 fois sur le bouton 3.".
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert("Vous avez cliqué sur le bouton 1.");
}
function g(){
alert("Vous avez survolé le bouton 2.");
}
function h(){
alert("Vous avez cliqué 2 fois sur le bouton 3.");
}
</script>
</head>
<body onLoad="alert('Page chargée.')">
<input type="button" value="Bouton 1" onClick="f()" /><br />
<input type="button" value="Bouton 2" onMouseOver="g()" /><br />
<input type="button" value="Bouton 3" onDblClick="h()" /><br />
</body>
</html>
Améliorons le code maintenant. Vous avez remarqué que les trois fonctions f(), g() et h() font le même traitement qui consiste à afficher un message dans une boite de dialogue de type alert(). Alors, au lieu de créer 3 fonctions, on va créer une seule. Pour préciser la nature du message à afficher on va passer un argument à cette fonction.
N'oublions pas l'événement load sur la balise <body> qui exécute directement du code Javascript sans passer par une fonction. Ce code aussi affiche un message à l'aide de alert(). On doit prévoir ceci dans la fonction qu'on va créer.
On peut donc réécrire le code comme ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(arg){
switch(arg){
case 0: alert("Page chargée."); break;
case 1: alert("Vous avez cliqué sur le bouton 1."); break;
case 2: alert("Vous avez survolé le bouton 2."); break;
case 3: alert("Vous avez cliqué 2 fois sur le bouton 3.");
}
}
</script>
</head>
<body onLoad="f(0)">
<input type="button" value="Bouton 1" onClick="f(1)" /><br />
<input type="button" value="Bouton 2" onMouseOver="f(2)" /><br />
<input type="button" value="Bouton 3" onDblClick="f(3)" /><br />
</body>
</html>
Dans ce cas on s'est servi de la structure de contrôle switch case pour tester plusieurs conditions (4 exactement).
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(arg){
switch(arg){
case 0: alert("Page chargée."); break;
case 1: alert("Vous avez cliqué sur le bouton 1."); break;
case 2: alert("Vous avez survolé le bouton 2."); break;
case 3: alert("Vous avez cliqué 2 fois sur le bouton 3.");
}
}
</script>
</head>
<body onLoad="f(0)">
<input type="button" value="Bouton 1" onClick="f(1)" /><br />
<input type="button" value="Bouton 2" onMouseOver="f(2)" /><br />
<input type="button" value="Bouton 3" onDblClick="f(3)" /><br />
</body>
</html>
Les événements en vidéo
Page 7
Les événements en Javascript
Les événements en Javascript
