Contenu principal
Cours : Apprendre à coder > Chapitre 6
Leçon 5: Les événements du DOM- Rendre des pages Web interactives avec les événements
- Ajouter un écouteur d’événement
- Défi : cliquer le chat
- Les types d’événements du DOM
- Utiliser les propriétés d'événement
- Défi : moustache de chat
- Traiter les formulaires avec les événements
- Défi : le texte à trous
- Bloquer le comportement par défaut des événements
- Résumé : les événements du DOM
Les types d’événements du DOM
Le navigateur déclenche beaucoup d'événements. Une liste complète est disponible sur MDN, mais voici la plupart des types et noms d'événements.
- événements souris (
MouseEvent) : mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu - événements tactiles (
TouchEvent) : touchstart, touchmove, touchend, touchcancel - événements clavier (
KeyboardEvent) : keydown, keypress, keyup - événements de page : focus, blur, change, submit
- événements fenêtre : scroll, resize, hashchange, load, unload
Remarquez que certains événements sont spécifiques au périphérique. Les événements tactiles ne sont déclenchés que sur les périphériques tactiles, comme les smartphones ou les portables à écran tactile. Les événements souris sont déclenchés sur la plupart des navigateurs, mais parfois sont plus lents que les événements tactiles sur les smartphones. L'événement "mouseover" (survol de la souris) n'est pas déclenché sur tous les smartphones, car il n'existe pas de moyen de survoler un écran sans le toucher.
Certains développeurs ajoutent des écouteurs sur les deux événements, tactiles et souris, pour que leur interface réponde promptement sur tous les supports. D'autres développeurs utilisent des bibliothèques comme FastClick, qui détermine automatiquement les événements à écouter sur chaque support (c'est ce que nous faisons, ici, à Khan Academy). Étant donné que vous débutez, le plus simple est d'écouter les événements souris, car c'est ce qu'il y a de plus universel.
Vous souhaitez rejoindre la discussion ?
pourquoi dans vous n'avez utiliser le mot 'return'(1 vote)- dans la fonction pour addEventListener je pas vue le mot 'return'(1 vote)
addEventListener n' est pas une fonction.
elle active la fonction après l' écoute de l' event
voici la syntaxe.
document.addEventListener(event, function, useCapture).(2 votes)