Chargement...

Écouteurs d’événements

Au vestiaire, un porte-manteau. Le bouton est #peg, le mot dessus est hang. En dessous, #ticket dit encore blank.
La page d’avant, c’était la sonnette et la propriété onclick. Là, une seule place. La deuxième fonction chassait la première. Ici on n’écrit pas cette propriété. typeof et this appartiennent aussi à cette page-là.
Ici, c’est addEventListener. L’appel ajoute la fonction à la liste de clic du bouton. Cette ligne ne l’exécute pas. Le ticket reste blank jusqu’à peg.click().
Tu ajoutes wool, puis silk. La seconde ne pousse pas la première dehors. Un clic lance les deux : wool d’abord, silk ensuite. Le ticket devient wool silk. Le mot du bouton reste hang.
Si tu passes deux fois la même fonction wool, le second appel n’ajoute rien. Un clic, un passage.
removeEventListener retire la fonction que tu as ajoutée. Une fonction neuve, même avec les mêmes lignes, est un autre objet. wool reste.
Le script de la page ajoute les deux et clique une fois. La ligne sous le porte-manteau est wool silk / 2 / peg. On ne crée pas d’élément, on n’écrit pas de style, et on ne lit pas l’argument d’événement. Ça, c’est la page suivante.

Deux crochets, pas une seule place

getElementById ne te donne que le bouton et le paragraphe du ticket. Chaque appel à addEventListener peut poser un autre écouteur à côté. Le clic parcourt la liste du début à la fin. Ces fonctions ne prennent pas de paramètre. L’objet événement vient ensuite.

Qui écoute

Le bouton commence avec hang, et blank en dessous. Lis les lignes dans l’ordre. Chaque extrait part de ce bouton neuf, sauf la ligne de la page : c’est la démo en bas. Cette démo ne retire personne.

📊 Qui écoute

Moment Qui écoute Texte du ticket Confusion facile
click, pas encore d’écouteur personne blank un clic vide écrit wool
addEventListener pour wool, avant click wool blank l’ajout lui-même écrit wool
click avec wool seul wool wool le texte du bouton devient wool
wool puis silk, un click les deux, wool puis silk wool silk seul le second tourne
removeEventListener pour wool, puis click silk silk les deux tournent encore
script de la page, un click les deux wool silk la ligne finit par hang

addEventListener("click", wool) met wool au bout de la liste de clic. Il n’appelle pas wool. peg.click() envoie un clic et parcourt la liste depuis le début. Le texte du bouton ne change pas.
silk, ajouté après, se place derrière wool. Les deux tournent. L’ordre est l’ordre d’ajout.
Le même objet fonction n’est pas ajouté deux fois. peg.addEventListener("click", wool) puis la même ligne laissent une liste d’un seul. Un clic lance wool une fois. parts.length vaut 1 et le ticket est wool.
removeEventListener("click", wool) retire cet objet. silk reste, si tu l’as ajouté. Une fonction neuve qui fait aussi push de "wool" ne correspond pas. Après peg.removeEventListener("click", function () { parts.push("wool"); }), le wool d’origine est encore sur la liste. Un clic écrit encore wool.
join(" ") met seulement une espace entre les mots déjà dans parts. On ne joint pas une liste vide ici. Le ticket commence par le mot blank et ne change que dans un écouteur.

Personne n’écoute encore

Le fichier s’ouvre avec le bouton et le paragraphe. Aucun écouteur n’est ajouté. Le clic part, et ces deux journaux demandent le ticket et le mot du bouton.

Porte-manteau calme

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

Les journaux sont blank et hang. La liste de clic était vide. Le paragraphe n’a pas changé.

L’écouteur attend

addEventListener range wool. Le corps ne tourne pas sur cette ligne. parts reste vide, le ticket reste blank, le bouton dit encore hang.

Ajouter, ne pas lancer

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Les journaux sont blank, 0 et hang. wool est sur la liste. Personne ne l’a appelée, donc parts n’a pas de mot.

click lance ceux qui sont sur la liste

Cet extrait repart du bouton neuf. Seul wool est ajouté, puis peg.click(). Le ticket devient wool. Le texte du bouton reste hang. parts.length vaut 1.

Un écouteur

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

Les journaux sont wool, hang et 1. Un écouteur, un mot. hang est encore le bouton.

silk s’assoit à côté de wool

Bouton neuf. wool d’abord, silk ensuite, et seulement alors un click. Pas de clic entre les deux ajouts. wool pousse "wool" et l’écrit. silk pousse "silk" et écrit les deux mots avec une espace. Le ticket est wool silk. parts.length vaut 2. Le bouton reste hang.

Les deux tournent

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Les journaux sont wool silk, 2 et hang. silk n’a pas effacé wool. Un clic a parcouru la liste dans l’ordre d’ajout.

Retirer wool du porte-manteau

Bouton neuf. Les deux fonctions sont ajoutées, puis removeEventListener est appelé avec la même fonction wool. silk reste. Un click ne lance que silk. Le ticket est silk, pas wool silk. parts.length vaut 1.

Retirer wool

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Les journaux sont silk, 1 et hang. wool était le même objet que tu avais ajouté, donc il a quitté la liste. La démo du bas ne retire personne.

Une ligne sous le porte-manteau

Le script est à la fin du body, une fois le bouton et les paragraphes en place. Il ajoute wool, puis silk, puis appelle click une fois. Chaque fonction ajoute 1 à hits et pousse son mot. La ligne assemble le texte du ticket, le compte et peg.id. Elle n’écrit pas le texte du bouton. Elle ne lit pas d’argument d’événement.

Démo de la page — porte-manteau

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

La ligne est wool silk / 2 / peg. Le ticket est wool silk, pas blank. Le compte est 2, parce que les deux écouteurs ont tourné sur un seul clic. Le dernier mot est l’id du bouton, peg.id, pas le mot hang. Sur le bouton, c’est encore hang. La page suivante est l’objet événement. Elle lit l’argument que ces fonctions ne prennent pas.

Cinq vérifications au porte-manteau

  1. Clique sans écouteur. Le ticket est blank et le bouton est hang.
  2. Ajoute wool et ne clique pas. Le ticket est blank, parts.length vaut 0, le bouton est hang.
  3. Ajoute wool, puis clique. Le ticket est wool, le bouton est hang, parts.length vaut 1.
  4. Ajoute wool, puis silk, puis clique une fois. Le ticket est wool silk, parts.length vaut 2, le bouton est hang.
  5. Ajoute les deux, retire wool, puis clique. Le ticket est silk, parts.length vaut 1, le bouton est hang. Lis la ligne de la page : wool silk / 2 / peg.

Où ce porte-manteau trompe

Sur le bouton, c’est encore hang. La liste avait les deux fonctions, ou seulement silk, ou personne.

  • Attendre que le second addEventListener remplace le premier, comme onclick
  • Attendre que addEventListener lui-même mette le ticket à wool
  • Attendre que seul silk tourne quand les deux sont ajoutés
  • Attendre que le texte du bouton devienne wool
  • Attendre que removeEventListener avec une fonction neuve retire wool
  • Ajouter deux fois la même fonction wool et attendre deux passages
  • Lire ici onclick, typeof null ou this.id ; c’était la page de la sonnette
  • Lire ici event.target ; ces fonctions ne prennent pas d’argument, l’objet événement est la page suivante
  • Construire le bouton avec createElement ; c’était une page plus ancienne
  • Lire la ligne comme blank / 0 / hang

Ce qui reste

  • Sans écouteur, peg.click() laisse le ticket blank et le bouton hang
  • addEventListener laisse le ticket blank jusqu’au click
  • Un clic avec wool seul met le ticket à wool et laisse le bouton hang
  • wool puis silk, puis un clic, met le ticket à wool silk
  • removeEventListener avec le même wool, puis le clic, met le ticket à silk
  • Le même wool ajouté deux fois tourne une fois, et une fonction neuve ne le retire pas
  • La ligne de la page est wool silk / 2 / peg

🧠 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 50 de 52
Javascript Tutoriel