Chargement...

L’objet event

Au mur du musée, une plaque. Le cadre extérieur est #wall. Dedans, #plaque porte un lien, #seal. Le mot sur le lien est open, et href vaut /wing. Sous le mur, #slip dit encore blank.
Le navigateur remet un objet à la fonction. Le paramètre s’appelle event. event.type est la sorte d’événement. Un clic met cette chaîne à click. event.target est l’élément où le clic est tombé. event.currentTarget est l’élément où cet écouteur est posé. Les deux ne coïncident que si le clic et l’écouteur partagent un élément.
Le sceau est un lien. preventDefault annule le saut vers /wing. Après l’appel, event.defaultPrevented vaut true. Sans l’appel, le drapeau reste false. Le clic part ensuite vers l’extérieur : sceau, plaque, mur. stopPropagation sur la plaque coupe ce trajet, l’écouteur du mur ne tourne pas.
Le script de la page clique une fois sur le sceau. La ligne sous la plaque se lit click / seal / plaque / true / quiet. Ici on n’assigne pas onclick, on n’appelle pas removeEventListener, et on ne crée pas d’élément.

L’objet que le navigateur passe

La page d’avant était le porte-manteau. wool et silk n’avaient pas de paramètre et ne lisaient pas cet objet. Leur ligne était wool silk / 2 / peg. La page de la sonnette assignait onclick et lisait this. Pas celle-ci. getElementById ne donne que le mur, la plaque, le sceau et la fiche.
addEventListener ne fait encore que ranger la fonction. L’objet arrive quand le clic exécute la fonction, pas au moment de l’ajout. Lis currentTarget dans la fonction. Au retour, cette propriété vaut null.

Ce qu’un clic rapporte

La fiche commence par blank. Le texte du lien reste open. Lis les rangées dans l’ordre. Chaque extrait part de ce mur neuf, sauf la rangée de la page, qui est la démo en bas. Cette démo n’appelle pas removeEventListener.

📊 Ce qu’un clic rapporte

Moment Ce que tu lis Texte de la fiche Confusion facile
écouteur sur le sceau, seal.click(), lire le type event.type click lire l’id comme type
écouteur sur la plaque, clic sur le sceau, target event.target.id seal lire currentTarget
le même clic, currentTarget event.currentTarget.id plaque lire target
preventDefault sur le sceau, puis le drapeau event.defaultPrevented true croire que le lien part encore
sans preventDefault event.defaultPrevented false croire que chaque écouteur annule le lien
stopPropagation sur la plaque, le mur écoute aussi marks joints plaque attendre plaque wall
script de la page, un click la ligne click / seal / plaque / true / quiet la ligne finit par wall

Un clic sur le sceau est un seul objet. Chaque écouteur sur le trajet voit le même. type ne change pas. target ne change pas. currentTarget change : c’est l’élément dont l’écouteur tourne maintenant.
preventDefault parle à l’action par défaut du navigateur. Pour ce lien, c’est suivre /wing. L’appel ne retire pas un écouteur de la liste. stopPropagation parle au trajet. Il n’annule pas le lien. Appeler l’un n’appelle pas l’autre.
join(" ") ne met un espace qu’entre des mots déjà dans marks. On ne joint pas une liste vide ici. La fiche commence par le mot blank et ne change que dans un écouteur, ou dans le script de la page après le clic.

Le type

L’écouteur est sur le sceau. La fonction nomme le paramètre event et écrit event.type sur la fiche. Ensuite seal.click() la lance.

Lire le type

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);

La sortie est click. Le type est la sorte d’événement, pas l’id et pas le mot open.

L’élément sous le clic

Mur neuf. L’écouteur est sur la plaque, pas sur le sceau. Le clic tombe quand même sur le sceau. event.target est cet élément, donc event.target.id vaut seal.

Lire target

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);

La sortie est seal. L’élément de l’écouteur est la plaque. target ne nomme pas la plaque. Il nomme l’élément sous le clic.

Où l’écouteur est posé

Même mur neuf, écouteur toujours sur la plaque, clic toujours sur le sceau. La fiche écrit les deux id, target d’abord, puis currentTarget.

Lire les deux id

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);

La sortie est seal plaque. Le premier mot est le clic. Le second est l’élément qui porte cet écouteur. Pose l’écouteur sur le sceau et clique le sceau : les deux id valent seal, car le clic et l’écouteur partagent un élément. Cette lecture passe par la plaque, donc les id diffèrent. Lis currentTarget dans la fonction. Au retour, il vaut null.

Annuler le lien

Le href du sceau est /wing. L’action par défaut de ce clic est de suivre le lien. preventDefault annule cette action. Il ne retire pas l’écouteur. Juste après, event.defaultPrevented vaut true.

Annuler le lien

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);

La sortie est true. Sans preventDefault, la même lecture vaut false. La fiche dirait false, et l’action du lien resterait. stopPropagation ne pose pas ce drapeau.

Le clic part vers l’extérieur

Le sceau est dans la plaque, la plaque dans le mur. Un clic sur le sceau atteint l’écouteur de la plaque, puis celui du mur, sauf si le trajet est coupé. stopPropagation sur la plaque le coupe. La fonction du mur ne tourne pas. preventDefault ne coupe pas le trajet.

Couper le trajet

javascript 
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);

La sortie est plaque. Le mot wall n’entre pas dans marks. Sans stopPropagation, le même clic écrirait plaque wall. La démo du bas coupe le trajet et annule aussi le lien.

Une ligne sous la plaque

Le script est à la fin du body, une fois le mur et les paragraphes en place. L’écouteur du sceau appelle preventDefault. Celui de la plaque appelle stopPropagation, puis garde le type, l’id de target, l’id de currentTarget et le drapeau. Celui du mur mettrait heard à wall, mais le trajet est déjà coupé, donc heard reste quiet. La ligne s’écrit après seal.click(), quand le mur a eu sa chance.

Démo de la page — plaque du musée

html 
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>

La ligne se lit click / seal / plaque / true / quiet. Le type est click. L’id de target est seal. L’id de currentTarget est plaque, car cet écouteur est sur la plaque. Le drapeau est true, car l’écouteur du sceau a appelé preventDefault avant la lecture par la plaque. Le dernier mot est quiet, pas wall, car stopPropagation a tourné sur la plaque. Le texte open n’est pas dans la ligne. La fiche devient click seal plaque. La page suivante est la délégation. Le sceau est déjà dans le balisage. Ici on n’ajoute pas d’enfant après l’écouteur.

Cinq contrôles à la plaque

  1. Pose l’écouteur sur le sceau et clique. La fiche est click.
  2. Pose l’écouteur sur la plaque, clique le sceau, lis event.target.id. La fiche est seal.
  3. Le même écouteur écrit les deux id. La fiche est seal plaque. Un écouteur sur le sceau lui-même écrirait seal seal.
  4. Appelle preventDefault, puis lis event.defaultPrevented. La fiche est true. Sans l’appel, elle est false.
  5. Appelle stopPropagation sur la plaque pendant que le mur écoute aussi. marks se joint en plaque. Lis la ligne : click / seal / plaque / true / quiet.

Où cette plaque trompe

Le lien dit encore open. La fiche n’est pas le texte du lien.

  • Attendre que l’argument de la fonction soit l’élément sceau, et non l’objet d’événement
  • Lire event.target alors que tu voulais l’élément de l’écouteur
  • Lire event.currentTarget alors que tu voulais l’élément sous le clic
  • Attendre que preventDefault retire l’écouteur, comme removeEventListener au porte-manteau
  • Attendre que stopPropagation annule le saut vers /wing
  • Attendre que l’écouteur du mur tourne encore après stopPropagation sur la plaque
  • Lire event.currentTarget après le retour de la fonction et attendre plaque
  • Assigner onclick, ou lire this et typeof null ; c’était la sonnette
  • Construire le lien avec createElement ; c’était une page plus ancienne
  • Lire la ligne comme si elle finissait par wall, ou comme wool silk / 2 / peg

Ce qui reste

  • event.type après un clic vaut click
  • Écouteur sur la plaque et clic sur le sceau : event.target.id vaut seal
  • Sur ce même clic, event.currentTarget.id vaut plaque
  • Écouteur sur le sceau : target et currentTarget valent tous deux seal
  • preventDefault met event.defaultPrevented à true ; sans l’appel, false reste
  • stopPropagation sur la plaque empêche l’écouteur du mur
  • La ligne se lit click / seal / plaque / true / quiet

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