5.1 Bases du travail avec les événements
Les événements en JavaScript permettent d'interagir avec l'utilisateur et de réagir à ses actions, telles que les clics de souris, les appuis sur les touches, les changements dans les formulaires et bien d'autres. Comprendre comment ajouter et supprimer des gestionnaires d'événements est une partie importante du développement d'applications web interactives.
Qu'est-ce qu'un événement?
Un événement est un signal du navigateur qui indique que quelque chose s'est passé. Par exemple, l'utilisateur a cliqué sur un bouton ou la page a été chargée. Les événements permettent d'exécuter certaines actions en réponse à ces signaux.
Types d'événements
Il existe de nombreux types d'événements. Certains des plus couramment utilisés incluent :
- Souris:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Clavier:
keydown,keyup,keypress - Formulaire:
submit,change,focus,blur - Document/Fenêtre:
load,resize,scroll,unload
Gestionnaires d'événements
Les gestionnaires d'événements (ou écouteurs d'événements) sont des fonctions qui s'exécutent en réponse à un événement spécifique. Ils "écoutent" certains événements et se déclenchent lorsque ces événements se produisent.
5.2 Ajout de gestionnaires d'événements
Ajout de gestionnaires d'événements avec addEventListener
La méthode addEventListener permet d'ajouter des gestionnaires d'événements aux éléments. Elle offre plus de flexibilité et
de contrôle par rapport aux méthodes traditionnelles d'ajout d'événements, telles que l'utilisation des attributs HTML (onclick, onchange etc.).
Syntaxe :
element.addEventListener(event, handler, options);
Où :
element: l'élément auquel le gestionnaire d'événements est ajoutéevent: le type d'événement sur lequel réagir (par exemple, 'click', 'input', 'keydown')handler: la fonction qui sera appelée à l'occurrence de l'événementoptions: paramètres supplémentaires (argument optionnel)
Exemple : Ajout d'un gestionnaire d'événement click
Dans cet exemple, un gestionnaire d'événement est ajouté à un bouton. Lorsque l'utilisateur clique sur le bouton, un message de notification apparaît.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
Exemple : Ajout de plusieurs gestionnaires d'événements
Avec addEventListener, on peut ajouter plusieurs gestionnaires pour un même événement.
Dans cet exemple, deux gestionnaires d'événements sont ajoutés à un bouton. Lors du clic, les deux gestionnaires s'exécutent successivement, affichant les messages correspondants dans la console.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 Utilisation du paramètre options
Le paramètre options permet de configurer le comportement du gestionnaire d'événements. Les options les plus couramment utilisées sont :
once: sitrue, le gestionnaire sera appelé seulement une fois, puis supprimé automatiquementcapture: sitrue, l'événement est traité durant la phase de capture au lieu de la phase de bouillonnementpassive: sitrue, indique que le gestionnaire ne fera jamais appel àpreventDefault()
Exemple : Gestionnaire qui s'exécute uniquement une fois
Dans cet exemple, le gestionnaire d'événements s'exécutera seulement une fois, puis sera supprimé automatiquement.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 Suppression des gestionnaires d'événements
Suppression des gestionnaires d'événements avec removeEventListener
La méthode removeEventListener permet de supprimer des gestionnaires d'événements qui ont été ajoutés avec
addEventListener. Pour cela, il est nécessaire de fournir les mêmes arguments qui ont été utilisés
lors de l'ajout du gestionnaire.
Syntaxe :
element.removeEventListener(event, handler, options)
Où :
element: l'élément dont on supprime le gestionnaire d'événementsevent: le type d'événement dont le gestionnaire doit être suppriméhandler: la fonction qui a été assignée comme gestionnaire d'événementsoptions: paramètres supplémentaires (doivent correspondre aux paramètres utilisés lors de l'ajout du gestionnaire)
Exemple : Suppression du gestionnaire d'événement click
Dans cet exemple, un gestionnaire d'événement click est ajouté à un bouton. Appuyer sur un autre bouton supprime
le gestionnaire d'événement click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION