Scribd
Importer
17 vues28 pages

Js Evenements

Transféré par

John AZOMAHOU
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
17 vues28 pages

Js Evenements

Transféré par

John AZOMAHOU
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 28

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
• document.getElementById("identifiant")
• Remarque
• Autres possibilités
• Images: document.images["identifiant"]
• Formulaires: document.forms["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
document.querySelector('html').onclick = function() {
alert('Arrêtez de cliquer !');
}

2021/2022 JavaScript - Evènements 10


III. Evènements
Souris – Exemple (2)
• Exemple
let monImage = document.querySelector('img');
monImage.onclick = function(){
let maSrc = monImage.getAttribute('src');
if(maSrc === 'images/firefox-icon.png') {
monImage.setAttribute ('src','images/firefox2.png');
}else{
monImage.setAttribute ('src','images/firefox-icon.png');
}
}

2021/2022 JavaScript - Evènements 11


III. Evènements
Souris – Exemple (3)
• Exemple
function changerClic(){
this.src="./raichu.png"
}
var mydoc=document.getElementById("id1");
mydoc.onclick=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++;
document.getElementById("compteur").innerHTML = n;
}
var mydoc=document.getElementById("zoneTexte");
mydoc.onkeypress=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="sauve.php">
<input type="text" name="annee" id="annee"/>
<input type="submit"/>
</form>
<script type="text/javascript">
function verifier() {
var annee = document.getElementById("annee").value;
if (annee >= 1900 && annee <= 2000) return true;
else{
alert("L'année doit être entre 1900 et 2000");
return false;
}
}
document.getElementById("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 = date.getTime();
console.log("arrivee : "+arrivee);
}
document.body.onload=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 = document.querySelector('button');

btn.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')’;
document.body.style.backgroundColor = 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) + ')’;
document.body.style.backgroundColor = rndCol;
}

2021/2022 JavaScript - Evènements 23


IV. Méthodes de gestion d’évènements
Méthode addEventListener
• Exemple
var btn = document.querySelector('button');

function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')’;
document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('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 = document.querySelectorAll('button'); for (var i = 0; i < buttons.length;
i++) { buttons[i].onclick = bgChange; }

• Exemple
element.onclick = function1;
element.onclick = 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
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

2021/2022 JavaScript - Evènements 27


Bibliographie

• https://developer.mozilla.org/fr/docs/Web/JavaScript
• B. Bachelet, cours JavaScript, IUT d’’Allier
• A. Delhay-Lorrain, cours web serveur, IUT de Lannion, Lannion

2021/2022 JavaScript - Evènements 28

Vous aimerez peut-être aussi