JavaScript
Evènements
Laurent d’Orazio
Univ Rennes, CNRS, IRISA
2021-2022
Plan
I. Définition et exemples
II. Identification d’un élément
III. Evènements
IV. Méthodes de gestion d’évènements
2021/2022 JavaScript - Evènements 2
Plan
I. Définition et exemples
II. Identification d’un élément
III. Evènements
IV. Méthodes de gestion d’évènements
2021/2022 JavaScript - Evènements 3
I. Définition et exemples
• Définition
• Structures
• « Ecoutant » ce qui se passe dans le navigateur
• Permettant de déclencher des actions en fonction de quelque chose de particulier
• Généralement, action de l'utilisateur dans la page
• Souris, clavier…
• Et aussi, action du navigateur
• Chargement d'une page, erreur de téléchargement…
• Types d’évènements
• Evénements de la souris (clic, double clic, etc.)
• Evénements du clavier
• Evénements de formulaire
• Evénements de page
2021/2022 JavaScript - Evènements 4
Plan
I. Définition et exemples
II. Identification d’un élément
III. Evènements
IV. Méthodes de gestion d’évènements
2021/2022 JavaScript - Evènements 5
II. Identification d’un élément
• Motivation
• Identification de l’élément associé à l’évènement
• Déclaration
• <balise id="identifiant" …>…</balise>
• Accès
• [Link]("identifiant")
• Remarque
• Autres possibilités
• Images: [Link]["identifiant"]
• Formulaires: [Link]["identifiant"]
2021/2022 JavaScript - Evènements 6
Plan
I. Définition et exemples
II. Identification d’un élément
III. Evènements
IV. Méthodes de gestion d’évènements
2021/2022 JavaScript - Evènements 7
III. Evènements
Souris – Action du bouton
• mousedown
• Déclenché lorsque le bouton de la souris est enfoncé sur un élément
• mouseup
• Déclenché lorsque le bouton de la souris est relâché sur un élément
• click
• Déclenché lors d'un clic de la souris (enfoncé puis relâché) sur un élément
• dblclick
• Déclenché lors d'un double-clic de la souris sur un élément
2021/2022 JavaScript - Evènements 8
III. Evènements
Souris – Déplacement
• mouseover
• Déclenché lorsque la souris arrive sur un élément
• mouseout
• Déclenché lorsque la souris sort d'un élément
• mousemove
• Déclenché lorsque la souris bouge sur un élément
2021/2022 JavaScript - Evènements 9
III. Evènements
Souris – Exemple (1)
• Exemple
[Link]('html').onclick = function() {
alert('Arrêtez de cliquer !');
}
2021/2022 JavaScript - Evènements 10
III. Evènements
Souris – Exemple (2)
• Exemple
let monImage = [Link]('img');
[Link] = function(){
let maSrc = [Link]('src');
if(maSrc === 'images/[Link]') {
[Link] ('src','images/[Link]');
}else{
[Link] ('src','images/[Link]');
}
}
2021/2022 JavaScript - Evènements 11
III. Evènements
Souris – Exemple (3)
• Exemple
function changerClic(){
[Link]="./[Link]"
}
var mydoc=[Link]("id1");
[Link]=changerClic;
2021/2022 JavaScript - Evènements 12
III. Evènements
Clavier
• keydown
• Déclenché lorsqu'une touche du clavier est enfoncée
• keyup
• Déclenché lorsqu'une touche du clavier est relâchée
• keypress
• Déclenché par l'appui sur une touche du clavier
(enfoncé puis relâché)
2021/2022 JavaScript - Evènements 13
III. Evènements
Clavier – Exemple
<form>
<input id="zoneTexte" type="text"/>
</form>
<p id="compteur"></p>
<script>
let n=0;
function changerClavier(){
n++;
[Link]("compteur").innerHTML = n;
}
var mydoc=[Link]("zoneTexte");
[Link]=changerClavier;
</script>
2021/2022 JavaScript - Evènements 14
III. Evènements
Formulaire – Liés au formulaire
• change
• Déclenché lorsque le contenu d'un élément est modifié
• Déclenché au moment de la perte du focus par l'élément
• submit
• Déclenché à la soumission d'un formulaire
• Code JavaScript retourne «true» ou «false» pour valider la soumission
• reset
• Déclenché à la réinitialisation du formulaire
2021/2022 JavaScript - Evènements 15
III. Evènements
Formulaire – Liés à la sélection
• focus
• Déclenché lorsque l'élément récupère le focus
• blur
• Déclenché lorsque l'élément perd le focus
• select
• Déclenché lorsqu'une partie du contenu de l'élément est sélectionnée
2021/2022 JavaScript - Evènements 16
III. Evènements
Formulaire – Exemple
<form id="monFormulaire" method="get" action="[Link]">
<input type="text" name="annee" id="annee"/>
<input type="submit"/>
</form>
<script type="text/javascript">
function verifier() {
var annee = [Link]("annee").value;
if (annee >= 1900 && annee <= 2000) return true;
else{
alert("L'année doit être entre 1900 et 2000");
return false;
}
}
[Link]("monFormulaire").onsubmit=verifier;
2021/2022 JavaScript - Evènements 17
</script>
III. Evènements
Page
• load
• Déclenché une fois que la page est chargée
• Utilisé sur la balise <body>
• unload
• Déclenché au moment où la page est quittée
• Utilisé sur la balise <body>
• error
• Déclenché suite à une erreur de chargement
• Utilisé sur la balise <img>
• abort
• Déclenché lorsque le chargement de la page est abandonné
• Utilisé sur la balise <img>
2021/2022 JavaScript - Evènements 18
III. Evènements
Page – Exemple
<script type="text/javascript">
var arrivee;
function debut(){
var date = new Date();
arrivee = [Link]();
[Link]("arrivee : "+arrivee);
}
[Link]=debut;
</script>
2021/2022 JavaScript - Evènements 19
Plan
I. Définition et exemples
II. Identification d’un élément
III. Evènements
IV. Méthodes de gestion d’évènements
2021/2022 JavaScript - Evènements 20
IV. Méthodes de gestion d’évènements
• Propriétés du gestionnaire d’évènement
• Gestion d’événement en ligne
• Méthode addEventListner
2021/2022 JavaScript - Evènements 21
IV. Méthodes de gestion d’évènements
Propriétés du gestionnaire d’évènements
• Exemple
var btn = [Link]('button');
[Link] = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')’;
[Link] = rndCol;
}
2021/2022 JavaScript - Evènements 22
IV. Méthodes de gestion d’évènements
Gestion d’événements en ligne
• Remarque
• Non recommandé
• Exemple
<button onclick="bgChange()">Press me</button>
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')’;
[Link] = rndCol;
}
2021/2022 JavaScript - Evènements 23
IV. Méthodes de gestion d’évènements
Méthode addEventListener
• Exemple
var btn = [Link]('button');
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')’;
[Link] = rndCol;
}
[Link]('click', bgChange);
2021/2022 JavaScript - Evènements 24
IV. Méthodes de gestion d’évènements
Discussion (1)
• Gestion d’événement en ligne
• Mauvaise pratique
• Séparation des préoccupations
• Mélange HTML et JS
• Maintenance
• Exemple : événement sur 100 boutons
2021/2022 JavaScript - Evènements 25
IV. Méthodes de gestion d’évènements
Discussion (2)
• Propriétés du gestionnaire d’évènements
• Meilleure compatibilité (depuis IE 8)
• Limites sur l’ajout de plusieurs gestionnaires
• Exemple
var buttons = [Link]('button'); for (var i = 0; i < [Link];
i++) { buttons[i].onclick = bgChange; }
• Exemple
[Link] = function1;
[Link] = function2;
2021/2022 JavaScript - Evènements 26
IV. Méthodes de gestion d’évènements
Discussion (3)
• Méthode addEventListener
• Possibilité de supprimer un événement avec removeEventListener
• Possibilité d’ajouter plusieurs gestionnaires
• Plus complexe
• Moins bonne compatibilité (depuis IE 9)
• Exemple
[Link]('click', functionA);
[Link]('click', functionB);
2021/2022 JavaScript - Evènements 27
Bibliographie
• [Link]
• B. Bachelet, cours JavaScript, IUT d’’Allier
• A. Delhay-Lorrain, cours web serveur, IUT de Lannion, Lannion
2021/2022 JavaScript - Evènements 28
