Programmation événementielle
La programmation événementielle consiste en la réalisation d'actions suite à un événement.
Le clique d'une souris, le survol d'une image, la frappe d'une touche du clavier sont autant d'événements qui peuvent déclencher des changements sur la page.
On peut gérer ces événements grâce aux attributs des balises ou aux propriétés des éléments.
Définition : Directement dans l'attribut de la balise
Selon les balises nous avons accès à différents attributs.
<img alt='image'
src='../res/html5.png'
onclick='this.src = "../res/javascript.png";'/>
Ici c'est l'événement click (clique gauche) sur l'image qui déclenche le changement d'URL de l'image.
Remarque : this
this représente le contexte. C'est à dire l'objet sur lequel nous sommes en train de programmer. Ici c'est l'image.
Définition : Par programmation de la propriété de l'élément
Pour accéder aux attributs événementiels de l'élément, il existe des propriétés qui portent le même nom.
Il suffit de leur affecter une fonction qui correspond aux actions à accomplir.
HTML
<img alt='image' id='image2' src='../res/html5.png'/>
JavaScript
const image = document.querySelector('#image2');
image.onclick = function(){this.src = "../res/javascript.png"}
Dans l'exemple :
On récupère l'élément d'identifiant image.
Au clique sur l'image, on change sa source.
Attention ne confondez pas l'événement et la propriété d'événement.
Événement : click ; propriété d'événement : onclick
Liste non exhaustive des événements :
Événement de souris
Définition : click
Le bouton gauche de la souris est pressé et relâché.
Définition : dblclick
Le bouton gauche de la souris est Double-cliqué.
Définition : mousedown
Le bouton gauche de la souris est pressé.
Définition : mousemove
La souris est déplacée sur l'élément.
Définition : mouseout
La souris sort de l'élément.
Définition : mouseover
La souris entre sur l'élément.
Définition : mouseup
Le bouton gauche de la souris est relâché.
Définition : mousewheel
La molette de la souris est activée.
Définition : scroll
La barre de défilement est utilisée.
Définition : contextmenu
Le bouton droit de la souris est relâché (menu contextuel).
Événement de glissement
Définition : drag
L'élément est glissé.
Définition : dragend
Fin du glissement de l'élément.
Définition : dragenter
L'élément entre sur une cible de dépôt valide.
Définition : dragleave
L'élément quitte une cible de dépôt valide
Définition : dragover
L'élément glisse sur une cible de dépôt valide.
Définition : dragstart
Début du glissement d'un élément.
Définition : drop
L'élément reçoit un élément glissant.
Événement de formulaire
Définition : blur
L'élément a perdu le focus de saisie.
Définition : change
L'élément a changé de valeur et perdu le focus.
Définition : focus
L'élément prend le focus.
Définition : select
Sélection d'un texte dans un champ de saisie.
Définition : submit
Une demande d'envoi de formulaire.
Définition : input
Saisie dans l'élément
Définition : invalid
L'élément n'est pas valide.
Définition : blur
L'élément a perdu le focus de saisie.
Clavier
Définition : keydown
Une touche du clavier est enfoncée.
Définition : keypress
Une touche du clavier est enfoncée et relâchée.
Définition : keyup
Une touche du clavier est relâchée.
Document, Fichiers (image, audio, vidéo...)
Définition : abort
Action interrompu. Ex : chargement de l'élément image.
Définition : load
Le document est chargé.
Définition : resize
Un changement de dimension de fenêtre.
Définition : unload
Fermeture d'une page.
Définition : error
Erreur de chargement de l'élément.
Événements tactiles
Définition : touchstart
Déclenché quand un ou plusieurs points de l'élément sont touchés.
Définition : touchmove
Déclenché quand un ou plusieurs points de l'élément sont touchés lors d'un déplacement.
Définition : touchend
Déclenché quand un ou plusieurs points de l'élément ne sont plus touchés.