JavaScript est l'un des langages de...
En JavaScript, la gestion des événements est essentielle pour créer des applications interactives et réactives. Les événements sont des actions qui se produisent dans le navigateur, comme le chargement d’une page, le clic sur un bouton, le survol d’un élément, etc.
Voici un aperçu détaillé de la gestion des événements en JavaScript :
addEventListener() pour attacher des écouteurs d’événements à un élément HTML.element.addEventListener(event, function, useCapture).event : Le type d’événement à écouter (ex: « click », « mouseover », « keydown », etc.).function : La fonction à exécuter lorsque l’événement est déclenché.useCapture (optionnel) : Détermine si l’événement est capturé pendant la phase de capture ou de propagation. (Par défaut: false).removeEventListener() pour supprimer des écouteurs d’événements.element.removeEventListener(event, function).javascript element.addEventListener('click', function() { console.log('Clic détecté !'); });MouseEvent, KeyboardEvent, etc.) qui contiennent des informations sur l’événement déclenché.event.target pour obtenir l’élément déclencheur, event.type pour obtenir le type d’événement, etc.useCapture dans addEventListener() pour spécifier si l’événement doit être capturé ou non.Voici quelques exemples pratiques pour illustrer la gestion des événements en JavaScript :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de clic sur un bouton</title>
</head>
<body>
<button id="myButton">Cliquez ici</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('Bouton cliqué !');
});
</script>
</body>
</html>Dans cet exemple, un gestionnaire d’événements est attaché au clic sur le bouton. Lorsque le bouton est cliqué, une boîte de dialogue d’alerte s’affiche.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de survol d'un élément</title>
<style>
#myElement {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myElement">Survolez-moi</div>
<script>
document.getElementById('myElement').addEventListener('mouseover', function() {
this.style.backgroundColor = 'lightgreen';
});
document.getElementById('myElement').addEventListener('mouseout', function() {
this.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>Dans cet exemple, deux gestionnaires d’événements sont attachés à un élément div. Lorsque l’utilisateur survole l’élément, sa couleur de fond change en vert clair, et lorsqu’il quitte l’élément, sa couleur de fond revient à la couleur d’origine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de saisie dans un champ de formulaire</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Entrez du texte">
<p id="output"></p>
<script>
document.getElementById('myInput').addEventListener('input', function() {
document.getElementById('output').textContent = this.value;
});
</script>
</body>
</html>Dans cet exemple, un gestionnaire d’événements est attaché à la saisie dans un champ de texte. Lorsque l’utilisateur saisit du texte dans le champ, le texte est affiché en direct dans un paragraphe situé en dessous du champ.
Ces exemples démontrent comment la gestion des événements en JavaScript permet d’ajouter de l’interactivité aux pages web et d’améliorer l’expérience utilisateur.
Voici quelques cas particuliers de gestion des événements en JavaScript qui peuvent être intéressants d’un point de vue technique :
event.stopPropagation() :Parfois, vous pouvez rencontrer des situations où plusieurs éléments imbriqués ont des gestionnaires d’événements pour le même événement. Dans ce cas, l’événement peut se propager de l’élément enfant vers l’élément parent, ce qui peut causer des comportements inattendus. Pour éviter cela, vous pouvez utiliser event.stopPropagation() pour arrêter la propagation de l’événement.
Exemple :
<div id="parent">
<button id="child">Cliquez ici</button>
</div>
<script>
document.getElementById('child').addEventListener('click', function(event) {
event.stopPropagation();
alert('Clic sur le bouton enfant');
});
document.getElementById('parent').addEventListener('click', function() {
alert('Clic sur le parent');
});
</script>Dans cet exemple, si vous cliquez sur le bouton, l’alerte « Clic sur le bouton enfant » s’affiche, mais l’événement de clic ne se propage pas jusqu’à l’élément parent, donc l’alerte « Clic sur le parent » ne s’affiche pas.
event.preventDefault() :Parfois, vous voudrez annuler le comportement par défaut d’un événement, comme la soumission d’un formulaire ou le clic sur un lien. Vous pouvez utiliser event.preventDefault() pour empêcher le comportement par défaut de se produire.
Exemple :
<a href="https://www.example.com" id="myLink">Cliquez ici</a>
<script>
document.getElementById('myLink').addEventListener('click', function(event) {
event.preventDefault();
alert('Lien cliqué, mais le comportement par défaut est annulé.');
});
</script>Dans cet exemple, lorsque vous cliquez sur le lien, l’alerte s’affiche mais le lien n’est pas suivi car le comportement par défaut de l’événement de clic est annulé.
event.target pour la délégation d’événements :Lorsque vous avez de nombreux éléments enfants avec des gestionnaires d’événements similaires, au lieu d’attacher un gestionnaire d’événements à chaque élément, vous pouvez utiliser la délégation d’événements en attachant un gestionnaire d’événements à un élément parent et en vérifiant quel élément enfant a déclenché l’événement en utilisant event.target.
Exemple :
<ul id="myList">
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<script>
document.getElementById('myList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('Clic sur ' + event.target.textContent);
}
});
</script>Dans cet exemple, un seul gestionnaire d’événements est attaché à la liste <ul>, et lorsque vous cliquez sur n’importe quel élément <li>, l’alerte affiche le texte de l’élément cliqué. Cela simplifie le code et améliore les performances, surtout pour les listes dynamiques.
En conclusion 😉
La gestion des événements en JavaScript est un aspect fondamental du développement web moderne. En maîtrisant les concepts et les techniques décrits dans ce guide, vous serez en mesure de créer des applications web interactives et dynamiques.
Deux outils concrets pour piloter la qualité sans alourdir vos équipes Cette page met à…
Un chantier se gagne souvent avant même l’arrivée des équipes. Quand tout est clair dès…
Le mariage a du sens quand il repose sur une décision libre, mûrie et partagée.…
Une étude de cas réussie commence par une structure sûre. Ce modèle Word vous guide…
Les soft skills se repèrent vite sur une fiche, mais elles ne pèsent vraiment que…
Outil de comparaison et repérage des offres étudiantes Choisir des verres progressifs ressemble rarement à…
This website uses cookies.