12 - Gestionnaires d'évènements
Introduction
Un évènement est, le plus souvent, généré par l’utilisateur. Il peut s’agir d’un click, du mouvement de la souris, des touches du clavier, de la sélection ou désélection d’un champs…
| Evénements | Objets concernés |
|---|---|
| abort | Image |
| blur | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
| change | FileUpload, Select, Submit, Text, TextArea |
| click | Button, document, Checkbox, Link, Radio, Reset, Select, Submit |
| dblclick | document, Link |
| dragdrop | window |
| error | Image, window |
| focus | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
| keydown | document, Image, Link, TextArea |
| keypress | document, Image, Link, TextArea |
| keyup | document, Image, Link, TextArea |
| load | Image, Layer, window |
| mousedown | Button, document, Link |
| mousemove | Aucun spécifiquement |
| mouseout | Layer, Link |
| mouseover | Area, Layer, Link |
| mouseleave | Area, Layer, Link |
| mouseup | Button, document, Link |
| move | window |
| reset | form |
| resize | window |
| select | text, Textarea |
| submit | Form |
| unload | window |
Javascript permet de réagir aux différents évènements.
Trois façons de gérer les évènements
Javascript inline
See the Pen 701-12-1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Cette méthode n’est pas recommandée, elle mélange le Javascript au HTML.
Notez qu’on peut passer l’élément en paramètre à la fonction Javascript qui traite l’évènement, il est alors possible de faire des moficications sur cet élément en particulier. Ceci se fait à l’aide du mot clef this. C’est très utile si on veut travailler sur l’élément qui a généré l’évènement.
Dans d’autres cas il peut ne pas être nécessaire de passer l’élément en paramètre.
See the Pen 701-12-4 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Gestionnaire d’évènements externes
Première méthode
See the Pen 701-12-2 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Deuxième méthode
See the Pen 701-12-3 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Les deux méthodes présentées ici sont équivalentes. La deuxième présente néanmoins un avantage, elle permet de supprimer un gestionnaire d’évènement grâce à removeEventListener.
Dans les deux méthodes, la fonction qui traite l’évènement peut prendre en paramètre l’évènement qui généré l’appel de la fonction. Cet évènement contient une propriété target qui représente l’é;lément du DOM qui a déclanché l’évènement. C’est très utile si on veut travailler sur cet élément en particulier ou si vous souhaitez définir une même gestionnaire d’évènements pour plusieurs éléments du DOM.
toggle (basculement)
Il est fréquent de faire basculer la classe d’un élément entre deux choix.
See the Pen Untitled by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Prévenir le comportement par défaut
Il est possible de supprimer le comportement par défaut d’un élément du DOM lorsque l’on clique dessus comme par exemple un lien. Lorsque l’on clique sur un lien, la page change pour charger la page correspondant au lien. Il est possible d’empêcher ce comnportement.
See the Pen 701-12-6 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.
Cela peut être utilisé dans les formulaires pour éviter d’envoyer le formulaire au serveur s’il n’est pas correctement rempli lorsque l’utilisateur clique sur le bouton soumettre.
Faire les exercices 1 à 5