Evénement
Gestion des événements
On peut demander aux éléments d'un document web de réagir à des actions de l’utilisateur comme un clic de souris ou l'appui sur une touche du clavier par exemple. Dans un navigateur, chaque fois que l'on effectue une action (cliquer par exemple) un événement (event en Anglais) est détecté par le navigateur, c’est le moyen qu'il utilise pour dire : « Cette action vient de se passer ! ». Pour réagir à un événement comme un clic, il faut ajouter une fonction appelée gestionnaire d’événements à l’élément ( la page, un bouton, etc..) sur lequel on veut détecter le clic ; cela revient à dire « si un clic a lieu sur cet élément, appelle cette fonction ».
- Gestion des événements avec les attributs.
Voici quelques attributs de type événement:
Exemple de code1 : l’appui sur une touche de clavier ou un clic gauche sur le paragraphe déclenche l’appel de la fonction « affichage() », les parties jaunes permettent ce fonctionnement:
Le code:
<body onkeypress ="affichage();">
<p onclick = "affichage();">
Je suis un beau paragraphe qui attend que tu cliques sur moi.
</p>
<script>
function affichage()
{
alert("vous avez déclenché un événement") ;
}
</script>
</body>
Exemples de code2 : le survol d'une zone <div> modifie sa couleur de fond
Avant survol et pendant le survol de deux zones <div>:
Le code:
<!DOCTYPE html>
<html>
<head>
<title>Evenements Web</title>
<meta charset="utf-8">
</head>
<body>
<h1>Evenements sur la page Web</h1>
<div onmouseover="this.style.backgroundColor='#7777EE'"
onmouseout="this.style.backgroundColor='white'">
<p>Petit paragraphe deviendra bleu</p>
</div>
<div onmouseover="this.style.backgroundColor='#EE2222'"
onmouseout="this.style.backgroundColor='white'">
<p>Petit paragraphe deviendra rouge</p>
</div>
</body>
</html>
Explication:
La page écoute deux événements onmouseover ( quand la souris survole le div) et onmouseout ( quand la souris quitte la zone)
On change la valeur de la propriété backgroundColor de l'attribut style de la balise div ce qui change la couleur de fond. Dans le code la balise est appelé this ce qui peut se traduire par "l'élément ( la balise) qui est concerné par l'événement"
- Gestion des événements avec la méthode addEventListener()
On peut obtenir le même résultat avec la méthode addEventListener():
<!DOCTYPE html>
<html>
<head>
<title>Evenements Web</title>
<meta charset="utf-8">
<script src='evenements.js' async></script>
</head>
<body>
<h1>Evenements sur la page Web</h1>
<p>Du clic ou du survol</p>
<button>Cliquez sur NSI !</button>
<div id="zonebleue">
<p>Petit paragraphe deviendra bleu</p>
</div>
</body>
</html>
Contenu du fichier "evenements.js"
//On définit les variables des événements avec des requêtes sur des balises ou des id
var bouton = document.querySelector('button');
var zbleue = document.getElementById('zonebleue');
//On utilise la méthode addEventListener pour gérer des évènements
bouton.addEventListener('click', function(){alert('NSI cliqué');});
zbleue.addEventListener('mouseover', function(){this.style.backgroundColor ='blue';});
zbleue.addEventListener('mouseout', function(){this.style.backgroundColor='white';});
Créé avec HelpNDoc Personal Edition: Créer des fichiers d'aide Qt Help multi-plateformes