JavaScript côté navigateur : Les écouteurs d'évènements

Jusqu'à maintenant nous avons créé des scripts qui se déroulent dès le chargement de la page. La pluspart du temps on attendra un évènements pour effectuer une action. Par exemple, nous allons déclencher une action lors d'un clic sur un élément particulier. Pour faire cela on va avoir besoin d'utiliser un écouteur d'évènement gràce à la méthode `addEventListener`.

Soutenez Grafikart:

Retrouvez Grafikart sur:

[stephv]

Franchement des cours comme ça c'est dingue. Chaque jour un thème expliqué comme personne tu comprends tout c'est vraiment un plaisir. Merci pour ce partage Grafikart ;-)

[mailgibson]

Merci pour ces cours si clairs et synthétiques accessibles à la terre entière sans discrimination👍. Tu es un homme de grande valeur, paix sur toi et sur les tiens.

[Choubang]

Super merci pour les explications claire et très bien détaillé 👍

[FaaBioo]

pour ce tuto 🥰
Je cherchais plus d'infos sur cette fonction et je savais que ce cours JS m'apprendrais tout ce qu'il faut, en français et avec des exemples concrets 👍

Par contre, pour des vidéos YouTube d'une telle qualité et aussi longues, *le texte noir sur fond blanc* est plus agréable à lire car sur un mobile ce n'est pas évident de distinguer les caractères 😅

[nico]

Merci pour ce tuto. J'ai compris beaucoup de choses grâce à ton tuto.

[elhadjindiaye]

Merci Mr.grafikart pour vos excellentes formations

[forsethtv]

purééé c'est de la bonne szaaa ! merci !!

[simontrichereau]

5:02 "on va obtenir l'élément sur lequel on a cliqué, donc this sera l'équivalent d'un currentTarget si vous voulez"

C'est un peu confus parce que le this n'est pas équivalent à l'élément cliqué, mais à l'élément bindé (comme le currentTarget) ...

Je m'explique, si tu as un code html comme ça :

avec un button.addEventListener("click", maFunction), l'élément cliqué est le span et le this sera le bouton ...

Un autre exemple plus parlant :

<div>
<button>
<span>Click Me!</span>
</button>
</div>

Si je fais un div.addEventListener("click", maFunction) et que je clique sur le bouton, la target est bien la span, la currentTarget est bien la div et le this est bien la div aussi :)

[keyzarghazal]

Merci beaucoup pour tout ces cours ! tu es très clair et la progression et carrément bien faite... Ce qui me fait me demander, y'aurait pas une erreur d'Upload entre cette vidéo et la précédente ? Merci encore en tout cas :D

[tcgvsocg]

c'est marrant j ai justement fabriquer une application en python un peu pareil aujourd hui

[NolmanZ]

Yo ! Il me semble que keypress est deprecated voire même supprimée !

Excellent tuto as always

[Wildstraw]

on voit pas ton code en entier. les debuts et les fins des lignes ne sont pas visible. c'est chiant. mal fait