La pensée derrière la simplification des gestionnaires d'événements

Les événements sont utilisés pour répondre aux clics des utilisateurs, aux liens de mise au point du clavier et à modifier le texte du formulaire. Quand j'ai commencé à apprendre JavaScript, j'ai écrit des auditeurs d'événements complexes. Récemment, j'ai appris à réduire la quantité de code et le nombre d'auditeurs.

Commençons par un exemple simple: quelques blocs draggables. Nous voulons montrer à l'utilisateur les carrés colorés qu'ils ont traînés.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Faire glisser un bloc</p>

Approche intuitive

Lorsque j'ai commencé à apprendre les événements JavaScript, j'ai écrit une fonction d'écouteur d'événements distinct pour chaque élément. C'est un modèle commun car c'est le moyen le plus simple de commencer. Nous voulons que chaque élément ait un comportement spécifique, nous pouvons donc utiliser du code spécifique pour chaque élément.

 document.QuerySelect
  document.QuerySelector ('# dragged'). textContent = 'glisserd red';
});

Document.QuerySelector ('# Yellow'). AddEventListener ('dragstart', evt => {
  Document.QuerySelector ('# dragged'). textContent = 'traîner jaune';
});

document.QuerySelector ('# green'). AddEventListener ('dragstart', evt => {
  Document.QuerySelector ('# dragged'). textContent = 'dragged vert';
});

Réduire le code en double

Les écouteurs d'événements de cet exemple sont très similaires: chaque fonction affiche du texte. Ce code en double peut être effondré dans une fonction d'assistance.

 Aperçu de la fonction (couleur) {
  document.QuerySelector ('# dragged'). textContent = `glisser $ {couleur}`;
}

document
  .QuerySelector ('# Red')
  .AdDeventListener ('dragstart', evt => aperview ('red'));
document
  .QuerySelector ('# jaune')
  .AdDeventListener ('dragstart', evt => aperçu ('jaune'));
document
  .QuerySelector ('# green')
  .AdDeventListener ('dragstart', evt => aperçu ('green'));

Ceci est plus concis, mais nécessite toujours plusieurs fonctions et écouteurs d'événements.

Tirer parti des objets de l'événement

Les objets d'événement sont la clé pour simplifier les auditeurs. Lorsque l'écouteur d'événements est appelé, il envoie également l'objet d'événement comme premier paramètre. Cet objet contient des données pour décrire l'événement qui s'est produit, comme lorsque l'événement s'est produit. Pour simplifier notre code, nous pouvons utiliser la propriété evt.currentTarget , où currentTarget fait référence à l'élément qui attache l'écouteur d'événements. Dans notre exemple, ce sera l'un des trois carrés colorés.

 const aperview = evt => {
  const color = evt.currentTarget.id;
  document.QuerySelector ('# dragged'). textContent = `glisser $ {couleur}`;
};

Document.QuerySelector ('# Red'). AddEventListener ('DragStart', prévisualisation);
Document.QuerySelector ('# Yellow'). ADDEVENTListener ('DragStart', prévisualisation);
Document.QuerySelector ('# Green'). ADDEVENTListener ('DragStart', prévisualisation);

Maintenant, il n'y a qu'une seule fonction au lieu de quatre fonctions. Nous pouvons réutiliser exactement la même fonction qu'un écouteur d'événements, tandis que evt.currentTarget.id aura des valeurs différentes en fonction de l'élément qui a déclenché l'événement.

Utiliser la bulle d'événement

Le dernier changement consiste à réduire le nombre de lignes dans le code. Plutôt que d'attacher un écouteur d'événements à chaque bloc, attachez un seul auditeur d'événements à un élément contenant tous les blocs colorés.

Lorsqu'il est déclenché, un événement commence par l'élément (l'un des carrés) de l'événement originaire. Cependant, cela ne s'arrêtera pas là. Le navigateur va à chaque élément parent de l'élément et appelle tout écouteur d'événements dessus. Cela continuera à l'élément racine du document (en HTML Étiquette). Ce processus est appelé "bulle", car les événements augmentent comme des bulles dans l'arborescence des documents. La connexion d'un écouteur d'événements à l'élément de section fera bouillonner l'événement de mise au point du carré coloré traîné vers l'élément parent. Nous pouvons également profiter de la propriété evt.target , qui contient l'élément qui déclenche l'événement (l'un des carrés) au lieu de l'élément qui attache l'écouteur de l'événement (élément section ).

 const aperview = evt => {
  const color = evt.target.id;
  document.QuerySelector ('# dragged'). textContent = `glisser $ {couleur}`;
};

Document.QuerySelector ('Section'). AddEventListener ('DragStart', prévisualisation);

Maintenant, nous avons réduit de nombreux auditeurs d'événements à un seul! Pour un code plus complexe, cela fonctionnera mieux. En tirant parti des objets d'événements et en bouillonnant, nous pouvons contrôler les événements JavaScript et simplifier le code des gestionnaires d'événements.

Qu'en est-il des événements de clic?

evt.target est très efficace avec des événements tels que dragstart et change , où seuls quelques éléments peuvent recevoir des entrées de mise au point ou de modification.

Cependant, nous voulons généralement écouter les événements de clic afin que nous puissions répondre à l'utilisateur en cliquant sur un bouton dans l'application. L'événement de clic est déclenché pour tout élément du document, d'une grande div à une petite portée.

Changeons nos carrés colorés dragables à Clickable.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Cliquez sur un carré</p>

 const aperview = evt => {
  const color = evt.target.id;
  Document.QuerySelector ('# Clicked'). TextContent = `Cliquez sur $ {Color}`;
};

document.QuerySelector ('section'). AddEventListener ('click', prévisualisation);

Lorsque vous testez ce code, sachez que parfois "cliqué" n'est pas joint, pas lorsque vous cliquez sur un carré. La raison pour laquelle cela ne fonctionne pas est que chaque bloc contient un clickable<span></span> éléments, pas draggable<div> élément. Étant donné que Span n'a pas de jeu d'identité, la propriété <code>evt.target.id est une chaîne vide. Nous ne nous soucions que des carrés colorés du code. Si nous cliquons quelque part à l'intérieur du carré, nous devons trouver l'élément carré parent. Nous pouvons utiliser element.closest() pour trouver l'élément parent le plus proche de l'élément cliqué.

 const aperview = evt => {
  const element = evt.target.closest ('div [draggable]');
  if (élément! = null) {
    const Color = element.id;
    Document.QuerySelector ('# Clicked'). TextContent = `Cliquez sur $ {Color}`;
  }
};

Maintenant, nous pouvons utiliser un seul auditeur pour cliquer sur les événements! Si element.closest() renvoie null, cela signifie que l'utilisateur clique quelque part en dehors du carré coloré et que nous devons ignorer l'événement.

Plus d'exemples

Voici quelques autres exemples qui montrent comment profiter d'un seul auditeur d'événements.

Liste

Un modèle commun est d'avoir une liste interactive de projets où les nouveaux projets sont insérés dynamiquement à l'aide de JavaScript. Si nous joignons un écouteur d'événements à chaque projet, le code doit gérer l'écouteur d'événements chaque fois qu'un nouvel élément est généré.

<div id="buttons-container"></div>
<button id="add">Ajouter un nouveau bouton</button>

 Soit ButtonCounter = 0;
document.QuerySelector ('# add'). AddEventListener ('cliquez'
  const newbutton = document.createElement ('bouton');
  NewButton.TextContent = ButtonCounter;

  // Créez un nouvel écouteur d'événements chaque fois que vous cliquez sur "Ajouter un nouveau bouton" newbutton.addeventListener ('click', evt => {

    // Lorsque vous cliquez, enregistrez le numéro du bouton en cours de clic.
    Document.QuerySelector ('# Clicked'). TextContent = `Bouton cliqué # $ {NewButton.TextContent}`;
  });

  ButtonCounter;

  const Container = Document.QuerySelector ('# Buttons-Container');
  contener.ApendChild (Newbutton);
});

En tirant parti des bulles, nous pouvons utiliser un seul écouteur d'événements sur le conteneur. Si nous créons de nombreux éléments dans l'application, cela réduit le nombre d'auditeurs de N à deux.

 Soit ButtonCounter = 0;
const Container = Document.QuerySelector ('# Buttons-Container');
document.QuerySelector ('# add'). AddEventListener ('cliquez'
  const newbutton = document.createElement ('bouton');
  NewButton.Dataset.Number = ButtonCounter;
  ButtonCounter;

  contener.ApendChild (Newbutton);
});
contener.addeventListener ('click', evt => {
  const ClickedButton = evt.target.closest ('bouton');
  if (clickbutton! = null) {
    // Lorsque vous cliquez, enregistrez le numéro du bouton en cours de clic.
    Document.QuerySelector ('# Clicked'). TextContent = `Bouton cliqué # $ {ClickedButton.Dataset.number}`;
  }
});

Formulaire

Il y a peut-être un formulaire avec de nombreuses entrées et que nous voulons collecter toutes les réponses utilisateur dans un seul objet.

Nom:
Mail:
mot de passe:

Laissez les réponses = {
  nom: '',
  e-mail: '',
  mot de passe: ''
};

document
  .QuerySelector ('input [name = "name"]')
  .addeventListener ('change', evt => {
    const inputElement = document.QuerySelector ('input [name = "name"]');
    réponses.name = inputElement.Value;
    Document.QuerySelector ('# Preview'). TextContent = JSON.StRingify (réponses);
  });
document
  .QuerySelector ('Input [name = "e-mail"]')
  .addeventListener ('change', evt => {
    const inputElement = document.QuerySelector ('input [name = "e-mail"]');
    réponses.email = inputElement.Value;
    Document.QuerySelector ('# Preview'). TextContent = JSON.StRingify (réponses);
  });
document
  .QuerySelector ('entrée [name = "mot de passe"]')
  .addeventListener ('change', evt => {
    const inputElement = document.QuerySelector ('input [name = "mot de passe"]');
    réponses.password = inputElement.Value;
    Document.QuerySelector ('# Preview'). TextContent = JSON.StRingify (réponses);
  });

Utilisons plutôt le parent<form></form> Un seul auditeur sur l'élément.

 Laissez les réponses = {
  nom: '',
  e-mail: '',
  mot de passe: ''
};

document.QuerySelect
  Réponses [evt.target.name] = evt.target.value;
  Document.QuerySelector ('# Preview'). TextContent = JSON.StRingify (réponses);
});

en conclusion

Maintenant, nous savons comment tirer parti des bulles d'événements et des objets d'événements pour simplifier le chaos du gestionnaire d'événements complexes à plusieurs… et parfois même à réduire à un! J'espère que cet article vous aidera à réfléchir aux gestionnaires d'événements dans une nouvelle perspective. Je sais qu'après avoir passé beaucoup de temps à écrire du code en double pour faire la même chose dans ma carrière en développement précoce, c'était une révélation pour moi.