ISET Charguia Programmation Web 2 TI

Chapitre 5 : Les évènements

Table des matières

1. Généralités ...................................................................................................................................... 2
2. Liste des événements ..................................................................................................................... 2
3. Utilisation des événements ............................................................................................................ 3
a. Syntaxe ........................................................................................................................................ 3
b. Exemple ....................................................................................................................................... 3
4. Exemples d’évènements ................................................................................................................. 4
a. L’évènement focus ...................................................................................................................... 4
Exemple ........................................................................................................................................... 4
b. L'évènement click ....................................................................................................................... 4
5. Le mot-clé this ................................................................................................................................. 4
Exemple ............................................................................................................................................... 4
6. Quel évènement pour quel Objet JavaScript ................................................................................. 5
7. Une autre manière pour gérer les événements : l’objet event..................................................... 5

HAMZA SAMEH 1
ISET Charguia Programmation Web 2 TI

Chapitre 5
Les évènements

1. Généralités
Dans le cadre d'une stricte séparation entre le fond, la forme et les comportements dynamiques
d'une page, le fond est pris en charge par le code HTML, la forme par la feuille de style CSS et les
comportements dynamiques par le JavaScript.

L'utilisateur interagit avec une page par l'entremise d'événements.

La plupart des événements sont reliés à l'interface utilisateur du navigateur, tels les déplacements de
souris, les actions sur des boutons ou des touches du clavier, les réponses à des formulaires... Ces
événements sont en général reliés à un élément particulier dans la page. D'autres sont des événements
activés en réponse à une action spécifique du navigateur (par exemple le chargement d'un document,
voire d'une image seule).

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.

Ainsi, vous pouvez ajouter un événement à un élément de votre page Web (par exemple, une
balise<div>) pour faire en sorte de déclencher un code JavaScript lorsque l'utilisateur fera une action
sur l'élément en question.

Les évènements sont applicables à différents objets en JS.

2. Liste des événements

Il existe de nombreux événements, tous plus ou moins utiles. Parmi les évènements utiles que nous
n'aborderons pas, sachez qu'il en existe des spécifiques pour les plateformes mobiles (smartphones,
tablettes, etc...).

Voici la liste des principaux événements, ainsi que les actions à effectuer pour qu'ils se déclenchent :

Nom de Action pour le déclencher

l'événement
onabort Se déclenche lorqu'une image n'arrive pas à être complètement chargée ou si
son chargement est interrompu par l'utilisateur
Evènement s'appliquant uniquement à la balise <img>
onblur Se déclenche lorque l'élément perd le focus
onchange Se produit lorqu'une modification a lieu sur un champ de saisie
onclick Se déclenche lorsqu'un clic est fait sur l'élément
ondblclick Se déclenche lorsqu'un double clic est fait sur l'élément
ondragdrop Se déclenche lorque l'utilisateur essaie de glisser déplacer un élément dans la
fenêtre.
Cet évènement s'applique à l'objet "window" : window.ondragdrop
onerror Se déclenche lorsqu'une erreur est rencontrée au chargement de la page.
Cet évènement s'applique à l'objet "window" : window.onerror

HAMZA SAMEH 2
ISET Charguia Programmation Web 2 TI

onfocus Se déclenche lorsque l'élément à le focus

onkeydown Ces trois évènements constituent ensemble la saisie d'une touche du clavier :
onkeypress "onkeydown" correspond à l'action d'appuyer sur une touche
onkeyup "onkeypress" correspond à l'action de maintenir enfoncer la touche
"onkeyup" correspond à l'action de relacher la touche
onload Cet évènement se déclenche lorsque le document a terminé son chargement
complet
onmouseover Ces évènement se déclenchent losrque le curseur de la souris survole
onmouseout l'élément (onmouseover) ou bien quitte l'élément (onmouseout)
onmousemove Se déclenche losrque le curseur de la souris se déplace sur le document html
onchange Changer la valeur d'un élément spécifique aux formulaires (input,checkbox,
etc.)
oninput Taper un caractère dans un champ de texte
onselect Sélectionner le contenu d'un champ de texte (input,textarea, etc.)

Il existe aussi deux événements spécifiques à l'élément<form>, que voici :

Nom de l'événement Action pour le déclencher

onsubmit Envoyer le formulaire
onreset Réinitialiser le formulaire

3. Utilisation des événements

L’utilisation d’un évènement se fait à travers un gestionnaire d’évènements.

La syntaxe générale d’un gestionnaire d'évènements est toujours la même :

onÉvènement="lafonction();"

Un évènement peut être défini soit sur un objet dans le code JavaScript, soit sur l'élément
correspondant dans le code HTML

a. Syntaxe
• dans le code JavaScript :
nomobjet. onÉvènement=lafonction();

• dans le code HTML :

<Nomelement onÉvènement="lafonction();">

b. Exemple
• dans le code JavaScript :

window.onload = init();

• dans le code HTML :

<body onload="init(); ">

HAMZA SAMEH 3
ISET Charguia Programmation Web 2 TI

4. Exemples d’évènements
a. L’évènement focus
Le focus peut s'appliquer à de nombreux éléments, ainsi, si vous tapez sur la touche Tabulation de
votre clavier alors que vous êtes sur une page Web, vous allez avoir un élément de ciblé ou de
sélectionné qui recevra alors tout ce que vous tapez sur votre clavier

Exemple
<script>
function foc(){
alert("Vous rentrez dans la zone de texte");}
</script>

<input id="zone" type="text" onfocus="foc()"/>

b. L'évènement click

Exemple

L’évènement click sur un simple <span> :

<span onclick="alert('Hello !');">Cliquez-moi !</span>

Il suffit de cliquer sur le texte pour que la boîte de dialogue s'affiche.

5. Le mot-clé this
Ce mot-clé n'est, normalement, pas censé vous servir dès maintenant, cependant il est toujours bon
de le connaître pour les événements. Il s'agit d'une propriété pointant sur l'objet actuellement en
cours d'utilisation. Donc, si vous faites appel à ce mot-clé lorsqu'un événement est déclenché, l'objet
pointé sera l'élément qui a déclenché l'événement.

Exemple

<input id="input" type="text" size="50" value="Cliquez ici !"

onfocus="this.value='Appuyez maintenant sur votre touche de tabulation.';"
onblur="this.value='Cliquez ici !';"/>

HAMZA SAMEH 4
ISET Charguia Programmation Web 2 TI

6. Quel évènement pour quel Objet JavaScript

7. Une autre manière pour gérer les événements : l’objet event

L'objet event permet de fournir des détails supplémentaires sur l'événement qui vient de se produire.
Par exemple, l’événement keyDown indique que l'utilisateur vient d'appuyer sur une touche du clavier,
mais on ne sait pas quelle touche exactement. Avec l'objet event il est possible de préciser ce genre
de détail et bien plus encore.

L'objet event se propage dans l'arbre du DOM selon le flux d'événement décrit ou par défaut.

Pour plus de détails consultez le lien : http://www.chiny.me/objet-event-6-22.php

HAMZA SAMEH 5