JavaScript Academy · Leçon

L’objet événement

Lisez les détails d’un événement, comme sa cible et son type.

L’objet événement est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

L’argument événement

Lorsqu’un événement se déclenche, le navigateur transmet un objet événement à votre gestionnaire. Il contient des informations sur ce qui s’est produit et sur les éléments concernés.

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type est le nom de l’événement, ce qui permet à un même gestionnaire de réagir différemment selon le type d’événement.

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target est l’élément à l’origine réelle de l’événement, c’est-à-dire l’élément le plus profondément imbriqué avec lequel l’utilisateur a interagi.

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget est l’élément dont l’écouteur est en cours d’exécution, celui sur lequel vous avez appelé addEventListener.

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

target et currentTarget

Lorsque les événements se propagent, target peut être un enfant tandis que currentTarget est le parent qui écoute. Cette distinction permet la délégation d’événements.

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

Délégation d’événements

Attachez un seul écouteur à un parent et utilisez target.closest pour trouver l’enfant sur lequel l’action a été effectuée. Cette approche évolue mieux que l’utilisation de nombreux écouteurs.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp indique le moment où l’événement a été créé, ce qui est utile pour mesurer les durées entre les événements.

btn.addEventListener("click", (e) => {
  console.log(e.timeStamp);
});

Coordonnées des événements de souris

Les événements de souris ajoutent des données de position telles que clientX/clientY (par rapport à la fenêtre d’affichage) et pageX/pageY (par rapport au document).

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

Touches modificatrices

Des propriétés comme e.shiftKey, e.ctrlKey, e.altKey et e.metaKey vous indiquent quelles touches modificatrices étaient maintenues enfoncées.

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

event.isTrusted vaut true pour les événements réellement générés par l’utilisateur et false pour ceux créés par un script, ce qui aide à distinguer les saisies authentiques.

btn.addEventListener("click", (e) => {
  console.log(e.isTrusted);
});

Lire la touche

Les événements clavier exposent e.key (le caractère ou le nom de la touche), afin que vous puissiez réagir à des touches précises.

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("submit");
});

Vérification rapide

Faites la distinction entre les deux cibles.

Récapitulatif

L’objet événement décrit l’événement : type, target (son origine) et currentTarget (l’élément qui possède l’écouteur). Leur différence permet la délégation d’événements. Les événements fournissent également des coordonnées, des touches modificatrices, key, timeStamp et isTrusted.

Questions Fréquemment Posées

La leçon « L’objet événement » est-elle gratuite ?

Oui — le texte complet de « L’objet événement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’objet événement » ?

Lisez les détails d’un événement, comme sa cible et son type. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « L’objet événement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy