Handlers

Pour réagir à des évènements (exemple: click, keydown, etc.), on peut assigner un handler, une fonction qui est exécutée lors d'un évènement.

Les handlers sont un moyen d'exécuter du code JavaScript lors d'actions par l'utilisateur.

01 - DEMO

Réagir à l'évènement click

Ajouter le code nécessaire pour réagir à l'évènement click sur le bouton ci-dessous.

À vous de jouer, en codant dans le fichier 01-event-click.js
02 - EXO

Réagir à l'évènement keydown

Ajouter le code nécessaire pour réagir à l'évènement keydown (frappe d'une des touches du clavier).

Ajouter le texte "touche frappée !" dans le <textarea> ci-dessous, dès que ça se produit.

À vous de jouer, en codant dans le fichier 02-event-keydown.js
03 - DEMO

Utiliser l'objet Event

Pour gérer un évènement, on aimerait bien avoir plus d'infos sur ce qu'il vient de se produire. Pas seulement un click ou un keydown, mais par exemple "quelles sont les coordonnées de la souris, au moment où cet évènement c'est produit ?" ou encore "quelle touche du clavier exactement a été frappée ?", etc.

Lorsqu'un évènement se produit, le navigateur créé un "objet évènement", mets des informations dedans, et le passe en argument au handler.

Voici un exemple d'utilisation de l'objet évènement Coordonnées de la souris :
La suite se trouve dans fichier 03-event-object.js
04 - DEMO

Utiliser l'objet Event

Ajouter le code nécessaire pour écouter l'évènement click sur chacun des boutons ci-dessous. Pour en faciliter la sélection, ils possèdent tous la classe btn-4.

À vous de jouer, en codant dans le fichier 04-event-object.js
05 - EXO

Créer un compteur de clic

Ajouter le code nécessaire pour écouter l'évènement click sur le bouton ci-dessous.

Changer le contenu du bouton pour afficher le nombre de fois qu'il a été cliqué, exemple : bouton cliqué 3x

À vous de jouer, en codant dans le fichier 05-event-object.js
06 - DEMO

Évènements & formulaire

En HTML, lorsqu'un formulaire est envoyé, le navigateur charge (ou recharge) la page.

Nous allons voir qu'il est possible d'empêcher ce comportement, à l'aide de event.preventDefault()

Ajouter le code nécessaire pour empêcher le rechargement de la page, lors de l'envoi (ici le type d'évènement n'est pas click mais submit) du formulaire ci-dessous :

À vous de jouer, en codant dans le fichier 06-event-et-formulaire.js
07 - EXO

Évènements & formulaire

Bienvenue dans le dernier exo de notre série !