LabEx
EntrerRejoindre

Présentation des événements JavaScript

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Bienvenue dans la documentation JavaScript! Ce laboratoire vous présentera les événements.

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 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Evénements

Le fichier index.html a déjà été fourni dans la machine virtuelle.

Pour que les sites web soient réellement interactifs, il est nécessaire d'utiliser des gestionnaires d'événements. Ce sont des structures de code qui écoutent les activités dans le navigateur et exécutent du code en réponse. L'exemple le plus évident est la gestion de l'événement click, qui est déclenché par le navigateur lorsque vous cliquez sur quelque chose avec la souris. Pour le démontrer, entrez le code suivant dans votre console, puis cliquez sur la page web actuelle :

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

Il existe plusieurs façons d'attacher un gestionnaire d'événements à un élément. Ici, nous sélectionnons l'élément <html>. Nous appelons ensuite sa fonction addEventListener(), en lui passant le nom de l'événement à écouter ('click') et une fonction à exécuter lorsque l'événement se produit.

La fonction que nous venons de passer à addEventListener() ici est appelée une fonction anonyme, car elle n'a pas de nom. Il existe une autre façon d'écrire les fonctions anonymes, que nous appelons une fonction fléchée. Une fonction fléchée utilise () => au lieu de function () :

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire sur les événements. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.