DOM
Événements

Paramètres

Remarques

introduction

Définition:

En informatique, un événement est une action ou une occurrence reconnue par un logiciel pouvant être manipulé par le logiciel. Les événements informatiques peuvent être générés ou déclenchés par le système, par l'utilisateur ou par d'autres moyens. Source de définition

Les événements HTML sont des "choses" qui arrivent aux éléments HTML. JavaScript peut "réagir" sur ces événements. via les Event Listeners . De plus, les événements personnalisés peuvent être déclenchés à l'aide de dispatchEvent . Mais ce n'est qu'une introduction, alors commençons!

Écouteur d'événements de base

Pour écouter les événements, vous appelez target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Cela déclenchera loadImage à chaque clic sur my-button .

Les écouteurs d'événement peuvent être attachés à n'importe quel nœud de l'arborescence DOM. pour voir une liste complète de tous les événements déclenchés nativement dans le navigateur: cliquez ici Lien MDN pour une liste complète des événements

Suppression des écouteurs d'événements

La méthode removeEventListener () supprime les gestionnaires d'événements associés à la méthode addEventListener ():

element.removeEventListener("mousemove", myFunction);

Tout (eventname, function et options) dans removeEventListener doit correspondre à celui défini lors de l'ajout de l'écouteur d'événement à l'élément.

.bind avec removeListener

L'utilisation de .bind sur la fonction lors de l'ajout d'un écouteur d'événement empêchera la suppression de la fonction, supprimant réellement l'événement eventListener que vous pouvez écrire:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

écouter un événement une seule fois

Jusqu'à ce once option soit largement prise en charge, nous devons supprimer manuellement l'auditeur pair une fois que l'événement est déclenché pour la première fois.

Ce petit assistant nous aidera à atteindre cet objectif:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Il n'est pas recommandé d'attacher des fonctions au prototype Object, vous pouvez donc supprimer la première ligne de ce code et y ajouter une cible en tant que premier paramètre.

En attente du chargement du document

L'un des événements les plus couramment utilisés attend le chargement du document, y compris les fichiers de script et les images. L'événement de load sur le document est utilisé pour cela.

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

Parfois, vous essayez d'accéder à un objet DOM avant qu'il ne soit chargé, provoquant des pointeurs nuls. Ce sont vraiment difficiles à déboguer. Pour éviter cet événement, DOMContentLoaded plutôt DOMContentLoaded document . DOMContentLoaded garantit que le contenu HTML a été chargé et initialisé sans attendre d'autres ressources externes.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Objet événement

Pour accéder à l'objet événement, incluez un paramètre d' event dans la fonction de rappel de l'écouteur d'événement:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

comme l'enfant arrête la propagation de l'événement et que les événements sont écoutés pendant la phase de propagation, cliquer sur l'enfant ne fera que déclencher l'enfant. sans arrêter la propagation, les deux événements seront déclenchés.

e.preventDefault ();

La méthode event.preventDefault() arrête l'action par défaut d'un élément.

Par exemple:

• Empêcher un bouton d'envoi de soumettre un formulaire
• Empêcher un lien de suivre l'URL

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Identifie la cible actuelle de l'événement, car l'événement traverse le DOM. Il fait toujours référence à l'élément auquel le gestionnaire d'événement a été associé, par opposition à event.target qui identifie l'élément sur lequel l'événement s'est produit.

en d'autres termes

e.target renverra ce qui déclenche le déclenchement du répartiteur d'événements

e.currentTarget renverra ce à quoi vous avez assigné votre auditeur.

HTML:

<body>
   <button id="my-button"></button>
</body>

Javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

si vous cliquez sur my-button ,

• e.target sera my-button
• e.currentTarget sera le body

Événement bouillonnant et capturant

Les événements déclenchés sur des éléments DOM n'affectent pas uniquement l'élément qu'ils ciblent. N'importe quel ancêtre de la cible dans le DOM peut également avoir une chance de réagir à l'événement. Considérez le document suivant:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

Si nous ajoutons simplement des écouteurs à chaque élément sans aucune option, déclenchez un clic sur l'intervalle ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... alors l'événement va surgir à travers chaque ancêtre, déclenchant chaque gestionnaire de clic sur le chemin:

Text clicked!
Paragraph clicked!
Body clicked!

Si vous souhaitez que l'un de vos gestionnaires arrête l'événement de déclencher d'autres gestionnaires, il peut appeler la méthode event.stopPropagation() . Par exemple, si nous remplaçons notre second gestionnaire d'événements par ceci:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

Nous verrions la sortie suivante, avec le gestionnaire de click body jamais déclenché:

Text clicked!
Paragraph clicked, and that's it!

Enfin, nous avons la possibilité d'ajouter des écouteurs d'événement qui se déclenchent lors de la " capture " au lieu de la diffusion. Avant qu'un événement ne surgisse d'un élément à travers ses ancêtres, il est d'abord "capturé" dans l'élément via ses ancêtres. Un écouteur de capture est ajouté en spécifiant true ou {capture: true} tant que troisième argument facultatif de addEventListener . Si nous ajoutons les écouteurs suivants à notre premier exemple ci-dessus:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

Nous obtiendrons la sortie suivante:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

Par défaut, les événements sont écoutés en phase de bullage. Pour changer cela, vous pouvez spécifier la phase d'écoute de l'événement en spécifiant le troisième paramètre dans la fonction addEventListener. (Pour en savoir plus sur la capture et la diffusion, vérifiez les remarques )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true signifie écouter l'événement lors de sa descente dans l'arborescence DOM. false signifie écouter l'événement pendant qu'il monte dans l'arbre DOM.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

Les boîtes d'alerte apparaîtront dans cet ordre:

• 2: à la capture
• 1: sur la bulle

Cas d'utilisation réels

Capture Event sera distribué avant Bubble Event, vous pouvez donc vous assurer qu'un événement est écouté en premier si vous l'écoutez pendant sa phase de capture.

Si vous écoutez un événement click sur un élément parent et un autre sur son enfant, vous pouvez d'abord écouter l'enfant en premier ou le parent, en fonction de la modification du paramètre useCapture.

en bulles, l'événement enfant est appelé en premier, en capture, le parent d'abord

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

La définition de true sur le parent eventListener déclenchera d'abord l'écouteur parent.

Combiné à e.stopPropagation (), vous pouvez empêcher l’événement de déclencher l’écouteur d’événement enfant ou le parent. (plus à ce sujet dans l'exemple suivant)

Délégation d'événement

La délégation d'événement est un processus qui nous permet d'éviter d'ajouter des écouteurs d'événement à des nœuds spécifiques. à la place, l'écouteur d'événement est ajouté au nœud parent. Ce mécanisme utilise la propagation / propagation des événements pour gérer un événement à un élément / nœud de niveau supérieur dans le DOM au lieu d'utiliser l'élément sur lequel l'événement a été généré. Par exemple, pensez à ajouter des événements pour les éléments de liste suivants:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

Nous devons ajouter des gestionnaires de click et, fondamentalement, nous pouvons ajouter des écouteurs à chaque élément en utilisant une boucle, mais imaginons que nous voulons ajouter des éléments de manière dynamique. Donc, nous enregistrons tous les gestionnaires d'événements lorsque le DOM est chargé et après l'initialisation du DOM et en enregistrant tous les gestionnaires d'événements pour chaque élément, l'élément nouvellement inséré dans l' UL ci-dessus ne répondra pas au clic car cet élément n'est pas présent dans le DOM lorsque nous avons enregistré les écouteurs d'événement de clic.

Donc, pour surmonter ce problème, nous pouvons tirer parti de la délégation de l’événement. Ce qui signifie que, au lieu d'enregistrer les écouteurs sur chacun des éléments li , nous pouvons associer l'écouteur d'événement à son élément UL parent, par exemple:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Puisque l'événement se propage (bulles vers le haut) par défaut, alors cliquer sur n'importe quel élément LI fera également que l'élément UL déclenche le même événement. Dans ce cas, nous pouvons utiliser le paramètre e dans la fonction, qui est en fait l'objet événement et qui contient des informations utiles sur l'événement, y compris l'élément d'origine, à l'origine de l'événement. Ainsi, par exemple, nous pouvons utiliser quelque chose comme ceci:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Donc, il est évident que, e (Event Object) nous permet d'examiner l'élément source (e.target) et que nous pouvons facilement injecter de nouveaux éléments dans UL après le chargement de DOM et que le seul gestionnaire d'événements délégué gère tous les événements de clic dans le UL parent qui consomme également moins de mémoire car nous avons déclaré une seule fonction pour tous les éléments.

Déclencher des événements personnalisés

L'API CustomEvent permet aux développeurs de créer des événements personnalisés et de les déclencher sur des noeuds DOM, en transmettant des données en cours de route.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString représentant le nom de l'événement.

customEventInit - est des paramètres facultatifs (qui sera passé comme e dans l' exemple suivant).

Vous pouvez attacher eventListeners au document ou à tout élément HTML.

Une fois que l'événement personnalisé a été ajouté et lié à l'élément (ou au document), vous pouvez le lancer manuellement à partir de JavaScript.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);