Bienvenue dans le laboratoire de gestion des événements JavaScript ! Les événements sont des actions qui se produisent dans le navigateur, comme un utilisateur cliquant sur un bouton, déplaçant la souris ou appuyant sur une touche. La gestion des événements est le processus d'écriture de code qui répond à ces événements, rendant vos pages web interactives et dynamiques.
Dans ce laboratoire, vous apprendrez les méthodes fondamentales pour gérer les événements en JavaScript. Nous commencerons par l'attribut onclick de base en HTML et progresserons vers la méthode addEventListener, plus puissante et flexible. Vous apprendrez également à utiliser l'objet event pour contrôler le comportement des événements et obtenir des informations sur l'événement.
À la fin de ce laboratoire, vous serez capable de :
Attacher des gestionnaires d'événements à des éléments HTML.
Séparer votre logique JavaScript de votre structure HTML.
Empêcher l'action par défaut du navigateur pour un événement.
Identifier quel élément a déclenché un événement.
Commençons !
Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 98%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.
Ajouter l'attribut onclick à l'élément HTML
Dans cette étape, vous apprendrez la manière la plus directe de gérer un événement : en utilisant un attribut de gestionnaire d'événements HTML. L'attribut onclick vous permet d'exécuter un morceau de code JavaScript lorsqu'un élément est cliqué. Bien que cette méthode soit simple, il est généralement préférable de séparer votre HTML et votre JavaScript, ce que nous aborderons dans les étapes suivantes.
Tout d'abord, ajoutons un attribut onclick à notre bouton.
Dans l'explorateur de fichiers sur le côté gauche du WebIDE, trouvez et ouvrez le fichier index.html.
Localisez l'élément <button>.
Modifiez la balise du bouton pour inclure un attribut onclick qui affiche une alerte.
Votre élément <button> modifié devrait ressembler à ceci :
Après avoir ajouté le code, enregistrez le fichier index.html.
Pour voir vos modifications, basculez vers l'onglet Web 8080 en haut de l'interface. Cliquez sur le bouton "Click Me", et vous devriez voir une alerte de navigateur apparaître avec le message "Button Clicked!".
Utiliser addEventListener pour l'événement click
Dans cette étape, nous allons utiliser l'approche moderne et recommandée pour la gestion des événements : la méthode addEventListener. Cette méthode vous permet d'attacher un gestionnaire d'événements à un élément sans mélanger votre code JavaScript à votre balisage HTML. Cette pratique est connue sous le nom de "JavaScript discret" (unobtrusive JavaScript) et conduit à un code plus propre et plus facile à maintenir.
Tout d'abord, nettoyons notre HTML en supprimant l'attribut onclick que nous avons ajouté à l'étape précédente.
Ouvrez le fichier index.html.
Supprimez l'attribut onclick de l'élément <button>. Il devrait à nouveau ressembler à ceci :
<button id="myButton">Click Me</button>
Maintenant, ajoutons l'écouteur d'événements en utilisant JavaScript.
Ouvrez le fichier script.js depuis l'explorateur de fichiers. Il est actuellement vide.
document.querySelector('#myButton') : Cette ligne sélectionne l'élément bouton du DOM en utilisant son ID, myButton.
addEventListener('click', ...) : Cette méthode est appelée sur l'élément bouton. Elle prend deux arguments principaux :
Le premier argument est le type d'événement à écouter, dans ce cas, 'click'.
Le second argument est la fonction "gestionnaire" ou "écouteur" qui sera exécutée lorsque l'événement se produit. Ici, nous utilisons une fonction fléchée anonyme () => { ... }.
Enregistrez le fichier script.js et basculez vers l'onglet Web 8080. Cliquez sur le bouton, et vous devriez maintenant voir une alerte avec le message "Clicked with addEventListener!".
Définir la fonction de gestionnaire d'événements
Dans cette étape, vous apprendrez à rendre votre code encore plus propre et réutilisable en définissant une fonction nommée pour votre gestionnaire d'événements. Au lieu d'utiliser une fonction anonyme directement dans addEventListener, vous pouvez définir une fonction séparée, puis passer son nom à l'écouteur.
Cette approche est utile lorsque la logique de gestion des événements est complexe ou lorsque vous souhaitez réutiliser la même fonction pour plusieurs événements ou éléments.
Modifions notre fichier script.js pour utiliser une fonction nommée.
Ouvrez le fichier script.js.
Remplacez le code existant par le suivant :
const button = document.querySelector("#myButton");
function handleClick() {
button.textContent = "I was clicked!";
}
button.addEventListener("click", handleClick);
Voici ce qui a changé :
Nous avons défini une nouvelle fonction appelée handleClick. Cette fonction contient la logique qui s'exécutera lorsque le bouton sera cliqué – dans ce cas, elle change le texte du bouton.
Dans addEventListener, nous passons maintenant le nom de la fonction handleClick comme deuxième argument. Notez que nous passons la référence de la fonction elle-même, et non son appel (c'est-à-dire handleClick, et non handleClick()). Le navigateur invoquera la fonction pour nous lorsque l'événement de clic se produira.
Enregistrez le fichier script.js et allez dans l'onglet Web 8080. Cliquez sur le bouton. Cette fois, au lieu d'une alerte, vous verrez le texte du bouton changer en "I was clicked!".
Empêcher l'action par défaut avec preventDefault
Dans cette étape, nous allons explorer l'objet event et l'une de ses méthodes les plus utiles : preventDefault(). Lorsqu'un événement se produit, le navigateur transmet automatiquement un objet event à la fonction de gestion. Cet objet contient des informations sur l'événement et vous permet de contrôler son comportement.
Certains éléments HTML ont une action par défaut. Par exemple, l'action par défaut d'un lien (balise <a>) est de naviguer vers l'URL spécifiée dans son attribut href. La méthode event.preventDefault() vous permet d'arrêter cette action par défaut.
Notre fichier index.html contient déjà un lien avec l'ID myLink. Ajoutons-lui un écouteur d'événements pour l'empêcher de naviguer.
Ouvrez le fichier script.js.
Ajoutez le code suivant à la fin du fichier :
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
Analysons le nouveau code :
Nous sélectionnons l'élément <a> avec l'ID myLink.
Nous définissons une fonction de gestionnaire handleLinkClick qui accepte un paramètre, que nous avons nommé event. Ce sera l'objet événement fourni par le navigateur.
À l'intérieur de la fonction, nous appelons event.preventDefault() pour empêcher le navigateur de suivre le lien.
Nous ajoutons également un message console.log pour confirmer que notre gestionnaire s'exécute.
Enregistrez le fichier script.js. Allez maintenant dans l'onglet Web 8080.
Faites un clic droit n'importe où sur la page et sélectionnez "Inspecter" pour ouvrir les outils de développement du navigateur.
Basculez vers l'onglet "Console" dans les outils de développement.
Cliquez sur le lien "Visit LabEx (link will be disabled)".
Vous remarquerez deux choses : la page ne navigue pas vers labex.io, et le message "Link click detected, navigation prevented." apparaît dans la console.
Accéder à la cible de l'événement avec event.target
Dans cette dernière étape, nous allons découvrir une autre propriété importante de l'objet event : event.target. Cette propriété vous donne une référence à l'élément spécifique qui a déclenché l'événement. C'est incroyablement utile, surtout lorsque vous avez un seul écouteur d'événements sur un élément parent qui gère les événements pour plusieurs enfants (une technique appelée délégation d'événements).
Pour ce laboratoire, nous utiliserons event.target dans un contexte plus simple : pour modifier directement l'élément qui a été cliqué, sans avoir besoin d'une variable séparée pour cela.
Modifions la fonction handleClick de notre bouton pour utiliser event.target.
Ouvrez le fichier script.js.
Trouvez la fonction handleClick que vous avez écrite à l'étape 3 et modifiez-la pour accepter le paramètre event et utiliser event.target.
Remplacez l'ancienne fonction handleClick par cette nouvelle version :
function handleClick(event) {
// event.target fait référence au bouton qui a été cliqué
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
Voici la répartition :
La fonction handleClick accepte maintenant l'objet event comme paramètre.
Au lieu d'utiliser la variable button, nous utilisons maintenant event.target pour faire référence à l'élément qui a été cliqué.
event.target.style.backgroundColor = 'lightblue' change la couleur de fond de l'élément cliqué.
event.target.textContent = 'My color changed!' change son contenu textuel.
Votre fichier script.js complet devrait maintenant ressembler à ceci :
const button = document.querySelector("#myButton");
function handleClick(event) {
// event.target refers to the button that was clicked
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
button.addEventListener("click", handleClick);
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
Enregistrez le fichier et basculez vers l'onglet Web 8080. Cliquez sur le bouton. Vous verrez sa couleur de fond changer en bleu clair et son texte se mettre à jour en "My color changed!".
Résumé
Félicitations pour avoir terminé le laboratoire sur la gestion des événements JavaScript ! Vous avez acquis avec succès les concepts fondamentaux pour rendre les pages web interactives en répondant aux actions de l'utilisateur.
Dans ce laboratoire, vous avez abordé :
L'attribut onclick de base pour une gestion simple des événements directement en HTML.
La méthode addEventListener, moderne et préférée, pour séparer les préoccupations et maintenir votre code JavaScript propre.
Comment définir et utiliser des fonctions nommées comme gestionnaires d'événements pour une meilleure organisation et réutilisabilité du code.
Le puissant objet event, en utilisant event.preventDefault() pour arrêter les comportements par défaut du navigateur.
Comment identifier l'élément qui a déclenché un événement en utilisant la propriété event.target.
Ces compétences sont fondamentales pour le développement web front-end et serviront de base à la création d'applications web riches, dynamiques et conviviales. Continuez à pratiquer ces concepts pour les maîtriser.
