Événements JavaScript
À la porte de l’appartement, une sonnette. Le bouton est #bell, et le mot dessus est press. En dessous, #chime dit encore silent. Le HTML n’a pas d’attribut onclick, donc bell.onclick vaut null dès le départ.
Un vieux piège : typeof null vaut "object" en JavaScript. Donc typeof bell.onclick vaut aussi "object", pas "null" et pas "undefined". La comparaison bell.onclick === null est vraie.
Mettre une fonction dans onclick ne fait pas sonner. Le texte reste silent jusqu’à ce que bell.click() exécute la fonction qui occupe la place. La place n’en garde qu’une. Tu en assignes une deuxième, la première disparaît. Un clic ne lance pas les deux. addEventListener est la page suivante ; là, les écouteurs s’empilent. Cette page ne l’appelle pas.
bell.onclick = null vide la place. Un clic ensuite ne touche pas le texte. Dans la fonction, this est le bouton, donc this.id vaut bell. Le mot du bouton reste press. Le script de la page clique une fois. La ligne sous la sonnette est dong / 1 / bell. Ici on ne crée pas d’élément et on ne règle pas de propriété CSS.
Une place sur le bouton
La page précédente construisait des nœuds li avec createElement, puis les posait avec append, prepend et insertBefore. Ici on ne crée pas de nœud et on ne lit pas children. La page d’avant écrivait style et classList sur une pastille de peinture. Ici on n’assigne pas style. getElementById ne te donne que le bouton et le paragraphe. La nouveauté, c’est la propriété onclick : une fonction, ou null.
Ce que la place contient
Le bouton commence par press, et en dessous il y a silent. Lis les rangées dans l’ordre. Chaque extrait part de ce bouton neuf, sauf la rangée de la page, qui est la démo du bas. Cette démo n’assigne pas null.
📊 Ce que la place contient
| Moment | Contenu de onclick |
Texte de la sonnette | Confusion facile |
|---|---|---|---|
| avant toute assignation | null ; typeof vaut "object" |
silent | lire typeof comme "null" |
après la fonction ding, avant click |
une fonction | silent | croire que l’assignation sonne déjà |
après click avec ding |
cette fonction | ding | le texte du bouton devient ding |
dong remplace ding, puis un click |
la fonction dong, pas ding | dong | les deux fonctions s’exécutent |
onclick = null, puis click, bouton neuf |
null ; typeof vaut "object" |
silent | une place vide qui sonne encore |
script de la page, un click |
une fonction ; this.id vaut bell |
dong | la ligne finit par silent |
onclick est une propriété de l’élément. Sans gestionnaire, la valeur est null, et typeof null reste "object". Utilise === null pour savoir que la place est vide. L’assignation range la fonction. Elle ne l’appelle pas. bell.click() déclenche un clic et exécute la fonction qui est dans la place à ce moment-là. Le texte du bouton ne change pas. Une deuxième assignation écrase la propriété. Si tu as gardé un nom pour la première fonction, l’objet existe encore en mémoire, mais la propriété ne pointe plus vers lui. onclick = null retire le gestionnaire. Un attribut HTML onclick remplirait la même place ; ce bouton n’en a pas. Une fonction fléchée dans cette place ne met pas this sur le bouton. Cette page utilise une function classique.
La place est vide au départ
Le fichier s’ouvre avec le bouton et le paragraphe. Rien n’est encore assigné. Ces quatre affichages demandent la propriété, son typeof, le texte de la sonnette et le mot du bouton.
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);
Les affichages sont null, object, silent et press. La place est vide. typeof n’imprime pas le mot null. Le bouton et le paragraphe montrent encore les mots du balisage.
La fonction attend
onclick = function ... range la fonction. Le corps ne s’exécute pas sur cette ligne. La sonnette reste silent, et la propriété n’est plus null.
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);
Les affichages sont function, silent et false. Une fonction est dans la place. Le paragraphe n’a pas changé, parce que personne n’a appelé la fonction.
click exécute celle qui est là
bell.click() exécute le gestionnaire actuel. La sonnette devient ding. Le texte du bouton reste press. Après le clic, la place contient encore une fonction.
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);
Les affichages sont ding, press et function. Un clic, un changement, et le changement est dans le paragraphe. Le mot press est toujours sur le bouton.
La deuxième fonction remplace la première
Cet extrait repart du bouton neuf. ding est rangée, puis dong est écrite par-dessus, et seulement ensuite vient un click. Il n’y a pas de clic entre les deux assignations, donc la sonnette ne devient jamais ding dans ce passage. Après le clic, c’est dong. bell.onclick === ding vaut false. bell.onclick === dong vaut true.
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);
Les affichages sont false, true et dong. Le nom ding pointe encore vers une fonction. La propriété, non. Un clic n’a exécuté que dong.
null vide la place
Lance ceci sur le bouton neuf. Une fonction est assignée, puis effacée avant tout clic. bell.click() après null n’écrit pas dong. La sonnette reste silent. typeof redevient object, parce que la valeur est null.
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
Les affichages sont null, object et silent. La fonction qui aurait écrit dong n’est pas dans la place au moment du clic. La démo plus bas ne vide pas la place.
Une ligne sous la sonnette
Le script est à la fin de body, après le bouton et le paragraphe. Il range une fonction, puis appelle click une fois. Dans la fonction, taps passe de 0 à 1, la sonnette devient dong, et this.id est écrit dans bell.dataset.who. La ligne colle le texte de la sonnette, le compte et cet id. Elle n’écrit pas le texte du bouton.
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>
La ligne donne dong / 1 / bell. La sonnette est dong, pas silent. Le nombre est 1, parce que le script clique une fois. Le dernier morceau est l’id du bouton, pris dans this à l’intérieur du gestionnaire, pas le mot press. Le bouton dit encore press. La page suivante parle des écouteurs d’événements. Son outil principal n’est pas cette place unique de onclick.
Cinq vérifications
- Lis
onclick,typeof bell.onclick, le texte de la sonnette et celui du bouton. Les valeurs sont null, object, silent et press. - Assigne la fonction ding et ne clique pas.
typeofvaut function, la sonnette reste silent, etonclick === nullvaut false. - Appelle
bell.click()avec cette fonction ding. La sonnette est ding, le bouton est press, ettypeofvaut function. - Assigne ding, puis dong, puis un clic.
onclick === dingvaut false,onclick === dongvaut true, et la sonnette est dong. - Sur un bouton neuf, assigne une fonction, mets
onclickà null, puis clique. Les valeurs sont null, object et silent. La ligne de la page : dong / 1 / bell.
Où cette sonnette trompe
Le bouton dit encore press. La place tenait la mauvaise fonction, ou elle était vide.
- Lire
typeof bell.onclickcomme"null"alors que la valeur estnull - Attendre que l’assignation elle-même mette la sonnette à ding
- Attendre que
dingetdongpartent ensemble sur un clic après la deuxième assignation - Attendre que le texte du bouton devienne ding
- Attendre que
clickchange la sonnette aprèsonclick = null - Utiliser une fonction fléchée et attendre que
this.idvaille bell - Lire
event.targetici ; ces fonctions n’ont pas d’argument, et l’objet d’événement vient plus tard - Appeler
addEventListenerici ; la page suivante empile les écouteurs - Construire le bouton avec
createElement; c’était la page précédente - Lire la ligne comme silent / 0 / press
Ce que tu emportes
- Sans gestionnaire,
bell.onclickvaut null ettypeof bell.onclickvaut object - Assigner une fonction laisse la sonnette silent jusqu’au
click bell.click()avec la fonction ding met la sonnette à ding et laisse le bouton à press- La deuxième assignation remplace la première, donc un clic n’exécute que dong
onclick = nullpuisclicksur un bouton neuf laisse la sonnette silent- La ligne de la page est dong / 1 / bell, et
this.iddans le gestionnaire vaut bell
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 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