Chargement...

Délégation d’événements

Au guichet, une bande. Le parent est #strip. Deux boutons y sont déjà : #red, texte red, et #blue, texte blue. Sous la bande, #note dit encore blank.
Inutile de poser un écouteur sur chaque bouton. Un appel à addEventListener sur la bande suffit. Le clic d’un bouton à l’intérieur remonte jusqu’à la bande. event.target est le bouton. event.currentTarget est la bande, l’élément où cet écouteur est posé.
Le bouton #gold n’est pas encore dans la page. Il est créé après l’enregistrement de l’écouteur, ajouté à la bande, puis cliqué. La même fonction tourne. La note devient gold. Le script clique red, puis blue, puis gold. addEventListener n’a tourné qu’une fois, donc hands vaut 1. La ligne sous la bande se lit red / blue / gold / 1. Ces boutons sont type="button". Ici on n’appelle ni preventDefault ni stopPropagation. C’était la page de la plaque, et elle n’ajoutait pas d’enfant après l’écouteur.

Un écouteur pour chaque billet

La page de la plaque nommait event et lisait type, target et currentTarget sur un lien dans le mur. Sa ligne était click / seal / plaque / true / quiet. Le portemanteau gardait wool et silk sans paramètre. Sa ligne était wool silk / 2 / peg. Ici le paramètre event reste, mais target sert à autre chose : dire quel enfant a reçu le clic, même un enfant qui n’existait pas encore.
getElementById ne te donne que la bande, le bouton rouge, le bouton bleu et la note. Gold naît de createElement. Un écouteur sur red et un autre sur blue ratent gold, sauf si tu en poses un de nouveau après appendChild. Un écouteur sur la bande n’a pas besoin de cette seconde pose. Lis currentTarget dans la fonction. Au retour de la fonction, cette propriété vaut null.

Ce que la bande note

La note part de blank. Les libellés restent red et blue ; gold arrive plus tard. Lis les rangées dans l’ordre. Chaque extrait part de la bande à deux boutons, sauf la rangée de la page, qui est la démo en bas. Cette démo appelle addEventListener une fois.

📊 Ce que la bande note

Moment Ce que tu lis Texte de la note Confusion facile
écouteur sur la bande, clic sur red event.target.id red lire currentTarget, qui est strip
le même clic, lire currentTarget event.currentTarget.id strip lire l’id du billet
le même écouteur, clic sur blue event.target.id blue donner à blue son écouteur
gold créé après l’écouteur, puis cliqué event.target.id gold croire le nouveau bouton muet
clic sur la bande, avec le garde la note skip écrire l’id strip
script de la page la ligne red / blue / gold / 1 la ligne de la plaque, ou un 3 final

Un clic sur un bouton est un seul événement. target reste ce bouton pour chaque écouteur du trajet. Ici il y a un écouteur, sur la bande, donc pendant la fonction currentTarget est la bande. Le clic arrive parce que personne n’appelle stopPropagation. La page de la plaque coupait ce trajet. Celle-ci ne le coupe pas.
preventDefault sert à une action par défaut du navigateur, comme un lien qui quitte la page. Ces contrôles sont des boutons, pas des liens. Ne pas appeler preventDefault est toute la page, pas une ligne oubliée.
Si event.target et event.currentTarget sont le même nœud, le clic est tombé sur la bande, pas sur un bouton. La fonction écrit skip et ne prend pas le papier pour un billet. seen.join(" / ") ne joint que les ids déjà poussés dans seen. hands vient après. Le dernier jeton est donc le nombre d’appels à addEventListener, pas le nombre de billets cliqués.

Le billet sous le clic

L’écouteur est sur la bande. La fonction nomme le paramètre event et écrit event.target.id dans la note. Puis la page clique red. Elle n’appelle pas addEventListener sur red.

Lire le billet

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

La sortie est red. L’élément de l’écouteur est la bande. target ne signale pas le parent. Il signale le bouton sous le clic.

À qui appartient l’écouteur

Bande neuve, le même écouteur, le même clic sur red. La note écrit les deux ids, target d’abord, puis currentTarget.

Lire les deux ids

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id + " " + event.currentTarget.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

La sortie est red strip. Le premier mot est le billet. Le second est l’élément qui possède cet écouteur. Un écouteur posé sur red lui-même, puis un clic sur red, donnerait red red. Cette lecture utilise la bande, donc les deux ids diffèrent.

Le billet déjà à côté

Encore une bande neuve. Un écouteur, toujours seulement sur la bande. Cette fois le clic est blue. Blue était dans le balisage dès le départ. Il n’a pas d’écouteur à lui.

Entendre l’autre billet

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("blue").click();
console.log(note.textContent);

La sortie est blue. Un seul addEventListener a couvert les deux boutons déjà dans la bande. Blue n’a pas remplacé red. Red n’a pas eu besoin d’un second appel.

Un billet imprimé plus tard

L’écouteur est enregistré d’abord. Ensuite la page construit un bouton, met son id à gold, type à button, le texte à gold, et l’ajoute à la bande. Seulement alors elle clique gold.

Entendre un billet tardif

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
console.log(note.textContent);

La sortie est gold. Gold n’existait pas quand addEventListener a tourné. Le clic remonte de gold vers la bande, et target est gold. Tu ne poses pas d’écouteur sur gold.

Un clic sur le papier

La bande est aussi un nœud cliquable. Si la cible du clic est la bande, il n’y a pas d’id de billet à garder. La fonction compare target et currentTarget. S’ils sont égaux, la note devient skip.

Ignorer un clic sur la bande

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
strip.click();
console.log(note.textContent);

La sortie est skip. target et currentTarget sont tous deux la bande, donc le garde refuse le papier. Un clic sur red écrit encore red, parce que les deux références diffèrent. Sans le garde, strip.click() écrirait l’id strip dans la note.

La ligne sous la bande

Le script est à la fin de body, une fois la bande et les paragraphes en place. Un écouteur est enregistré, hands devient 1. Red est cliqué, puis blue. Chaque id de billet entre dans seen. Gold est créé, ajouté et cliqué, donc gold entre aussi dans seen. La ligne est écrite après ce troisième clic. La page ne clique pas la bande, donc skip n’est pas dans la ligne.

Démo de la page — bande de billets

html 
<!DOCTYPE html>
<html>
<head>
<title>event-delegation — page</title>
</head>
<body>
<div id="strip">
<button id="red" type="button">red</button>
<button id="blue" type="button">blue</button>
</div>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let strip = document.getElementById("strip");
let note = document.getElementById("note");
let seen = [];
let hands = 0;
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
seen.push(event.target.id);
}
strip.addEventListener("click", take);
hands = hands + 1;
document.getElementById("red").click();
document.getElementById("blue").click();
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
document.getElementById("line").textContent =
seen.join(" / ") + " / " + hands;
</script>
</body>
</html>

La ligne se lit red / blue / gold / 1. Les trois ids sont les billets cliqués, dans l’ordre. Le dernier jeton est hands. addEventListener a tourné une fois, donc ce jeton est 1, pas 3. La note finit sur gold, parce que gold était le dernier clic. Le mot blank a disparu. Le mot skip n’apparaît pas. La ligne de la plaque et celle du portemanteau sont d’autres pages.
Un bouton qui ne contient que du texte garde event.target sur le bouton, donc id vaut red, blue ou gold. Un span dans le bouton peut recevoir le clic. Le span n’a pas d’id. Cette page ne fait pas ça.

Au guichet

  1. Pose un écouteur sur la bande et clique red. La note est red. Red n’a pas d’écouteur à lui.
  2. Avec ce même écouteur, clique blue. La note est blue.
  3. Crée gold, ajoute-le, clique-le. La note est gold. L’écouteur était déjà sur la bande.
  4. Clique la bande. Avec le garde, la note est skip. Puis lis la ligne : red / blue / gold / 1.

Les ratés du guichet

Les libellés disent encore red, blue et gold. La note n’est pas le mot billet.

  • Un écouteur sur red et un autre sur blue, puis la surprise que gold reste muet
  • Lire event.currentTarget alors que tu voulais le billet
  • Lire event.target alors que tu voulais la bande
  • Oublier le garde, si bien que strip.click() écrit strip
  • Un span dans le bouton, donc target est le span et l’id est vide
  • Rappeler addEventListener sur gold, puis compter hands comme 2
  • Appeler preventDefault ou stopPropagation ; c’était la plaque
  • Attendre que l’argument de la fonction soit l’élément bouton
  • Lire la ligne comme click / seal / plaque / true / quiet, ou comme wool silk / 2 / peg
  • Lire le dernier jeton comme 3 parce que trois billets ont été cliqués

Ce qui reste

  • Un addEventListener sur la bande entend chaque bouton à l’intérieur
  • Au clic sur red, event.target.id vaut red et event.currentTarget.id vaut strip
  • Le même écouteur écrit blue quand blue est cliqué
  • Gold, créé après l’écouteur, écrit quand même gold
  • Un clic sur la bande, avec le garde, écrit skip
  • La ligne de la page se lit red / blue / gold / 1

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 52 de 52
Javascript Tutoriel