Maîtriser les attributs d'événement HTML

Introduction

Les attributs d'événement HTML sont utilisés pour ajouter une fonctionnalité aux éléments HTML. Lorsqu'un certain événement se produit, tel qu'un utilisateur clique sur un bouton ou soumet un formulaire, du code JavaScript peut être exécuté. Dans ce laboratoire, vous allez apprendre à utiliser les attributs d'événement HTML pour ajouter une interaction à vos pages web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Création d'un document HTML

Créez un nouveau fichier nommé index.html et ajoutez la structure HTML de base.

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

Ajout d'un bouton

Ajoutez un élément button au body de votre document HTML. Donnez-lui du texte à afficher, et un attribut id afin que nous puissions le référencer dans notre code JavaScript.

<button id="myButton">Cliquez ici</button>

Ajout d'un attribut d'événement

Ajoutez un attribut onclick à l'élément button. Dans cet attribut, nous allons spécifier le code JavaScript qui doit être exécuté lorsque le bouton est cliqué.

<button id="myButton" onclick="alert('Hello, World!')">Cliquez ici</button>

Ajout de plus de fonctionnalités

Ajoutez un élément div au body de votre document HTML. Cet élément sera utilisé pour afficher du texte lorsque le bouton est cliqué.

<div id="myDiv"></div>

Ensuite, ajoutez du code JavaScript pour mettre à jour le texte de l'élément div lorsque le bouton est cliqué.

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Cliquez ici
</button>
<div id="myDiv"></div>

Gérer la soumission du formulaire

Ajoutez un formulaire HTML au body de votre document HTML. Ajoutez également un attribut onsubmit au formulaire pour spécifier le code JavaScript qui doit être exécuté lorsque le formulaire est soumis.

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Utilisation d'écouteurs d'événements

Au lieu d'utiliser directement des attributs d'événement dans notre HTML, nous pouvons également utiliser JavaScript pour attacher des écouteurs d'événements à nos éléments HTML.

Tout d'abord, supprimez les attributs onclick et onsubmit de vos éléments HTML.

<button id="myButton">Cliquez ici</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Ensuite, créez une fonction JavaScript qui sera appelée lorsque le bouton est cliqué. Cette fonction devrait mettre à jour le texte de l'élément div.

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

Enfin, attachez un écouteur d'événement au bouton à l'aide de JavaScript.

<button id="myButton">Cliquez ici</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

Suppression d'écouteurs d'événements

Nous pouvons également supprimer des écouteurs d'événements à l'aide de JavaScript.

Ajoutez un nouveau bouton à votre document HTML. Ce bouton supprimera l'écouteur d'événement de clic du premier bouton.

<button id="removeButton">Supprimer l'écouteur d'événement de clic</button>

Ensuite, créez une nouvelle fonction JavaScript qui supprimera l'écouteur d'événement de clic du premier bouton.

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

Enfin, attachez un écouteur d'événement au nouveau bouton qui appellera la fonction removeClickListener() lorsqu'il est cliqué.

<button id="removeButton">Supprimer l'écouteur d'événement de clic</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

Résumé

Dans ce laboratoire, vous avez appris à utiliser les attributs d'événement HTML pour ajouter de l'interactivité à vos pages web. Vous avez également appris à utiliser JavaScript pour attacher et supprimer des écouteurs d'événements d'éléments HTML. Avec ces outils, vous pouvez créer des pages web dynamiques qui répondent à l'entrée de l'utilisateur.

Attributs d'événement HTML