TOC

Comprendre les événements en JavaScript

introduction

Dans la série en comprenant le DOM, nous avons abordé https://www.digitalocean.com/community/tutorials / Comprendre l’arborescence et les nœuds [l’arborescence DOM] et comment access , traverse, https://www.digitalocean.com/community/tutorials/how-to-make-changes- to-the-dom [ajouter et supprimer], et modify noeuds et éléments utilisant la console Developer Tools.

Bien que nous puissions maintenant apporter à peu près tous les changements souhaités au DOM, d’un point de vue utilisateur, cela n’est pas très utile car nous n’avons déclenché que manuellement les modifications. En apprenant davantage sur les événements, nous comprendrons comment tout relier pour créer des sites Web interactifs.

  • Les événements * sont des actions qui ont lieu dans le navigateur et qui peuvent être initiées par l’utilisateur ou par le navigateur lui-même. Vous trouverez ci-dessous quelques exemples d’événements courants pouvant se produire sur un site Web:

  • La page se termine

  • L’utilisateur clique sur un bouton

  • L’utilisateur survole une liste déroulante

  • L’utilisateur soumet un formulaire

  • L’utilisateur appuie sur une touche de son clavier

En codant les réponses JavaScript qui s’exécutent lors d’un événement, les développeurs peuvent afficher des messages aux utilisateurs, valider des données, réagir à un clic de bouton et de nombreuses autres actions.

Dans cet article, nous allons passer en revue les gestionnaires d’événements, les écouteurs d’événements et les objets d’événements. Nous allons également examiner trois manières différentes d’écrire du code pour gérer les événements, ainsi que quelques-uns des événements les plus courants. En apprenant sur les événements, vous pourrez créer une expérience Web plus interactive pour les utilisateurs finaux.

Gestionnaires d’événements et auditeurs d’événements

Lorsqu’un utilisateur clique sur un bouton ou appuie sur une touche, un événement est déclenché. Celles-ci sont appelées un événement de clic ou un événement de pression de touche, respectivement.

Un * gestionnaire d’événement * est une fonction JavaScript qui s’exécute lorsqu’un événement se déclenche.

Un * écouteur d’événement * attache une interface sensible à un élément, ce qui permet à cet élément particulier d’attendre et d’écouter le déclenchement de l’événement donné.

Il existe trois manières d’affecter des événements à des éléments:

  • Gestionnaires d’événements en ligne

  • Propriétés du gestionnaire d’événements

  • Auditeurs d’événements

Nous passerons en revue les trois méthodes afin de vous assurer que vous connaissez bien les différentes manières dont un événement peut être déclenché, puis nous discuterons des avantages et des inconvénients de chaque méthode.

Attributs de gestionnaire d’événements en ligne

Pour commencer à apprendre sur les gestionnaires d’événements, nous allons d’abord examiner le * gestionnaire d’événements en ligne *. Commençons par un exemple très basique composé d’un élément + button + et d’un élément + p +. Nous voulons que l’utilisateur clique sur le bouton + + + pour changer le contenu du texte du + p +.

Commençons par une page HTML avec un bouton dans le corps. Nous ferons référence à un fichier JavaScript auquel nous ajouterons du code dans un instant.

événements.html

<!DOCTYPE html>
<html lang="en-US">

<head>
   <title>Events</title>
</head>

<body>

 <!-- Add button -->
 <button>Click me</button>

 <p>Try to change me.</p>

</body>

<!-- Reference JavaScript file -->
<script src="js/events.js"></script>

</html>

Directement sur le bouton +, nous allons ajouter un attribut appelé` + onclick`. La valeur de l’attribut sera une fonction que nous créons appelée + changeText () +.

événements.html

<!DOCTYPE html>
<html lang="en-US">

<head>
   <title>Events</title>
</head>

<body>

   <button onclick="changeText()">Click me</button>

   <p>Try to change me.</p>

</body>

<script src="js/events.js"></script>

</html>

Créons notre fichier + events.js +, que nous avons placé dans le répertoire + js / + ici. Nous y créerons la fonction + changeText () +, qui modifiera le + textContent + de l’élément + p +.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an inline event handler.";
}

Lorsque vous chargez pour la première fois le + events.html, vous verrez une page qui ressemble à ceci:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-1.png [Premier rendu de events.html]

Cependant, lorsque vous ou un autre utilisateur cliquerez sur le bouton, le texte de la balise + p + changera de + essayez de me changer. + À + + changé en raison d’un gestionnaire d’événements en ligne. + `:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-2.png [Première réponse à l’événement sur le rendu events.html]

Les gestionnaires d’événements en ligne sont un moyen simple de commencer à comprendre les événements, mais ils ne doivent généralement pas être utilisés au-delà des tests et à des fins éducatives.

Vous pouvez comparer les gestionnaires d’événements inline aux styles CSS inline d’un élément HTML. Il est beaucoup plus pratique de gérer une feuille de style distincte de classes que de créer des styles en ligne sur chaque élément, tout comme il est plus facile de gérer du JavaScript entièrement géré via un fichier de script distinct plutôt que d’ajouter des gestionnaires à chaque élément.

Propriétés du gestionnaire d’événements

L’étape suivante à partir d’un gestionnaire d’événements en ligne est la * propriété de gestionnaire d’événements *. Cela fonctionne de manière très similaire à un gestionnaire en ligne, sauf que nous définissons la propriété d’un élément en JavaScript au lieu de l’attribut dans le code HTML.

La configuration sera la même ici, sauf que nous n’incluons plus le + onclick =" changeText () "+ dans le balisage:

événements.html

...
<body>

   <button>Click me</button>

   <p>I will change.</p>

</body>
...

Notre fonction restera similaire, sauf que nous devons maintenant accéder à l’élément + button dans JavaScript. Nous pouvons simplement accéder à + ​​onclick + comme nous accèderions à + ​​style + ou + id + ou à toute autre propriété d’élément, puis assigner la référence à la fonction.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

Lorsque vous chargez la page pour la première fois, le navigateur affiche les informations suivantes:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-3.png [Chargement initial de events.html avec le gestionnaire d’événements]

Maintenant, lorsque vous cliquez sur le bouton, cela aura un effet similaire à celui d’avant:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-4.png [Réponse avec le gestionnaire d’événements de events.html]

Notez que lorsque vous passez une référence de fonction à la propriété + onclick +, nous n’incluons pas les parenthèses, car nous n’invoquons pas la fonction à ce moment-là, mais ne faisons que lui renvoyer une référence.

La propriété du gestionnaire d’événements est légèrement plus facile à gérer que le gestionnaire en ligne, mais elle présente néanmoins certains des mêmes obstacles. Par exemple, si vous essayez de définir plusieurs propriétés + onclick + distinctes, toutes les propriétés sauf la dernière seront écrasées, comme illustré ci-dessous.

js / events.js

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
   p.textContent = "Will I change?";
}

const alertText = () => {
   alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

Dans l’exemple ci-dessus, les clics + button + afficheraient uniquement une alerte et ne modifieraient pas le texte + p +, car le code + alert () + était le dernier ajouté à la propriété.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-5.png [Réponse finale via le gestionnaire d’événements de events.html]

Avec une compréhension à la fois des gestionnaires d’événements intégrés et de leurs propriétés, passons aux écouteurs d’événements.

Auditeurs de l’événement

Les derniers ajouts aux gestionnaires d’événements JavaScript sont des écouteurs d’événements. Un * auditeur d’événement * surveille un événement sur un élément. Au lieu d’affecter l’événement directement à une propriété de l’élément, nous allons utiliser la méthode + addEventListener () + pour écouter l’événement.

+ addEventListener () + prend deux paramètres obligatoires: l’événement qu’il est à l’écoute et la fonction de rappel du programme d’écoute.

Le code HTML de notre écouteur d’événement sera le même que celui de l’exemple précédent.

événements.html

...
   <button>Click me</button>

   <p>I will change.</p>
...

Nous utiliserons toujours la même fonction + changeText () + comme auparavant. Nous allons attacher la méthode + addEventListener () + au bouton.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

Notez qu’avec les deux premières méthodes, un événement click s’appelait + onclick +, mais avec les écouteurs d’événement, il s’appelle + clic +. Chaque écouteur d’événement supprime le + sur + du mot. Dans la section suivante, nous examinerons plus d’exemples d’autres types d’événements.

Lorsque vous rechargez la page avec le code JavaScript ci-dessus, vous recevez le résultat suivant:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-6.png [Réponse du programme d’écoute des événements de events.html]

À première vue, les écouteurs d’événement semblent très similaires aux propriétés de gestionnaire d’événement, mais ils présentent quelques avantages. Nous pouvons définir plusieurs écouteurs d’événement sur le même élément, comme illustré dans l’exemple ci-dessous.

js / events.js

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
   p.textContent = "Will I change?";
}

const alertText = () => {
   alert('Will I alert?');
}

// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

Dans cet exemple, les deux événements sont déclenchés, fournissant à l’utilisateur une alerte et un texte modifié une fois que l’utilisateur a cliqué sur l’alerte.

Souvent, des fonctions anonymes seront utilisées à la place d’une référence de fonction sur un écouteur d’événement. Les fonctions anonymes sont des fonctions qui ne sont pas nommées.

// An anonymous function on an event listener
button.addEventListener('click', () => {
   p.textContent = "Will I change?";
});

Il est également possible d’utiliser les fonctions + removeEventListener () + pour supprimer un ou tous les événements d’un élément.

// Remove alert function from button element
button.removeEventListener('click', alertText);

De plus, vous pouvez utiliser + addEventListener () + sur les objets + document et` + window`.

Les écouteurs d’événements sont actuellement le moyen le plus courant et préféré de gérer les événements en JavaScript.

Événements communs

Nous avons appris l’existence de gestionnaires d’événements en ligne, de propriétés de gestionnaire d’événements et de programmes d’écoute d’événements utilisant l’événement click, mais il existe de nombreux autres événements en JavaScript. Nous allons passer en revue quelques-uns des événements les plus courants ci-dessous.

Événements de souris

Les événements de souris font partie des événements les plus fréquemment utilisés. Ils font référence à des événements qui impliquent de cliquer sur des boutons de la souris ou de survoler et de déplacer le pointeur de la souris. Ces événements correspondent également à l’action équivalente sur un périphérique tactile.

Event Description

click

Fires when the mouse is pressed and released on an element

dblclick

Fires when an element is clicked twice

mouseenter

Fires when a pointer enters an element

mouseleave

Fires when a pointer leaves an element

mousemove

Fires every time a pointer moves inside an element

Un «+ clic » est un événement composé composé des événements ` mousedown ` et ` + mouseup +` combinés, qui se déclenchent lorsque le bouton de la souris est enfoncé ou levé, respectivement.

Utiliser + mouseenter + et + mouseleave + en tandem recrée un effet de survol qui dure tant qu’un pointeur de la souris est sur l’élément.

Événements de formulaire

Les événements de formulaire sont des actions relatives aux formulaires, telles que les éléments + input + sélectionnés ou désélectionnés, et les formulaires soumis.

Event Description

submit

Fires when a form is submitted

focus

Fires when an element (such as an input) receives focus

blur

Fires when an element loses focus

Focus est atteint lorsqu’un élément est sélectionné, par exemple, par un clic de souris ou en y accédant via la touche + TAB +.

JavaScript est souvent utilisé pour soumettre des formulaires et envoyer les valeurs via une langue de traitement. L’avantage d’utiliser JavaScript pour envoyer des formulaires est qu’il ne nécessite pas de rechargement de page pour soumettre le formulaire, et que JavaScript peut être utilisé pour valider les champs de saisie obligatoires.

Événements de clavier

Les événements de clavier sont utilisés pour gérer les actions du clavier, telles que l’appui sur une touche, sa levée et la pression d’une touche.

Event Description

keydown

Fires once when a key is pressed

keyup

Fires once when a key is released

keypress

Fires continuously while a key is pressed

Bien qu’ils se ressemblent, les événements + keydown + et + keypress + n’accèdent pas à toutes les mêmes clés. Tandis que + keydown + accusera réception de chaque touche enfoncée, + touche enfoncée + omettra les touches ne produisant pas de caractère, telles que + SHIFT +, + ALT + ou '+ DELETE + `.

Les événements de clavier ont des propriétés spécifiques pour accéder à des touches individuelles.

Si un paramètre, appelé objet + event +, est transmis à l’écouteur d’événements, vous pouvez accéder à plus d’informations sur l’action qui a eu lieu. Les trois propriétés associées aux objets clavier sont + keyCode,` + key` et + code.

Par exemple, si l’utilisateur appuie sur la lettre «+ a +» de son clavier, les propriétés suivantes se rapportant à cette touche apparaîtront:

Property Description Example

keyCode

A number pertaining to the key

65

key

Represents the character name

a

code

Represents the physical key being pressed

KeyA

Pour montrer comment collecter ces informations via la console JavaScript, nous pouvons écrire les lignes de code suivantes.

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
   console.log('key: ' + event.keyCode);
   console.log('key: ' + event.key);
   console.log('code: ' + event.code);
});

Une fois que vous avez appuyé sur + ENTER sur la console, vous pouvez maintenant appuyer sur une touche du clavier. Dans cet exemple, nous allons appuyer sur` + a + `.

OutputkeyCode: 65
key: a
code: KeyA

La propriété + keyCode + est un numéro qui se rapporte à la touche sur laquelle vous avez appuyé. La propriété + key + est le nom du caractère, ce qui peut changer - par exemple, appuyer sur + a + avec + SHIFT + donnerait une + clé + de + A +. La propriété + code + représente la clé physique sur le clavier.

Pour en savoir plus, vous pouvez consulter la liste complete sur le réseau de développeurs Mozilla.

Objets d’événement

L’objet + Event + se compose de propriétés et de méthodes auxquelles tous les événements peuvent accéder. En plus de l’objet générique + Event +, chaque type d’événement a ses propres extensions, telles que + KeyboardEvent + et + + MouseEvent +.

L’objet + Event + est transmis via une fonction d’écoute en tant que paramètre. Il est généralement écrit comme + événement + ou + e +. Nous pouvons accéder à la propriété + code + de l’événement + keydown + pour reproduire les commandes du clavier d’un jeu sur PC.

Pour l’essayer, créez un fichier HTML de base avec les balises + <p> + et chargez-le dans un navigateur.

event-test-p.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <p></p>

</body>
</html>

Ensuite, tapez le code JavaScript suivant dans la console[ de votre navigateur.

// Pass an event through to a listener
document.addEventListener('keydown', event => {
   var element = document.querySelector('p');

   // Set variables for keydown codes
   var a = 'KeyA';
   var s = 'KeyS';
   var d = 'KeyD';
   var w = 'KeyW';

   // Set a direction for each code
   switch (event.code) {
       case a:
           element.textContent = 'Left';
           break;
       case s:
           element.textContent = 'Down';
           break;
       case d:
           element.textContent = 'Right';
           break;
       case w:
           element.textContent = 'Up';
           break;
   }
});

Lorsque vous appuyez sur l’une des touches - + a +, + s +, '+ d + ou + w + `- vous verrez une sortie similaire à celle-ci:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-7.png [Premier exemple d’objet d’événement]

À partir de là, vous pouvez continuer à développer la réponse du navigateur et à l’utilisateur qui appuie sur ces touches, et créer un site Web plus dynamique.

Ensuite, nous allons passer en revue l’une des propriétés d’événement les plus fréquemment utilisées: la propriété + cible +. Dans l’exemple suivant, nous avons trois éléments + div dans une` + section`.

event-test-div.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <section>
   <div id="one">One</div>
   <div id="two">Two</div>
   <div id="three">Three</div>
 </section>

</body>
</html>

En utilisant + event.target avec JavaScript dans la console des développeurs de notre navigateur, nous pouvons placer un écouteur d’événements sur la section` + extérieure de l’élément` et obtenir l’élément le plus profondément imbriqué.

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
   console.log(event.target);
});

En cliquant sur l’un de ces éléments, la sortie de l’élément spécifique correspondant sera renvoyée vers la console à l’aide de + event.target +. Ceci est extrêmement utile car il vous permet de ne placer qu’un seul écouteur d’événements pouvant être utilisé pour accéder à de nombreux éléments imbriqués.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-8.png [Deuxième exemple d’objet d’événement]

Avec l’objet + Event +, nous pouvons configurer des réponses relatives à tous les événements, y compris les événements génériques et des extensions plus spécifiques.

Conclusion

Les événements sont des actions qui ont lieu sur un site Web, telles que cliquer, survoler, soumettre un formulaire, charger une page ou appuyer sur une touche du clavier. JavaScript devient véritablement interactif et dynamique lorsque nous sommes en mesure de faire en sorte que les sites Web répondent aux actions prises par l’utilisateur.

Dans ce tutoriel, nous avons appris ce que sont les événements, des exemples d’événements courants, la différence entre les gestionnaires d’événements et les écouteurs d’événements, et comment accéder à l’objet + Event +. En utilisant ces connaissances, vous pourrez commencer à créer des sites Web et des applications dynamiques.

Related