Quels sont les différents événements supportés par JavaScript ?

La programmation qui permet des calculs basés sur les activités dans un navigateur ou par les activités effectuées par l’utilisateur sur les éléments d’un document est connue sous le nom de programmation événementielle.

Un événement est la spécification (essentiellement un objet créé par le navigateur et JavaScript) de quelque chose d’important qui s’est produit. Des exemples d’événements sont le clic, l’envoi, le keyup, etc. En JavaScript, tous les noms d’événements sont spécifiés en minuscules. Un gestionnaire d’événement (essentiellement une fonction) est un ensemble d’instructions (code) qui gère l’événement.

Le tableau ci-dessous énumère les événements les plus couramment utilisés et les attributs de balises qui leur sont associés :

Evènement (Event)Balise attribut (Tag Attribute)
bluronblur
changeonchange
clickonclick
dblclickondblclick
focusonfocus
keydownonkeydown
keypressonkeypress
keyuponkeyup
loadonload
mousedownonmousedown
mouseuponmouseup
mousemoveonmousemove
mouseoveronmouseover
mouseoutonmouseout
resetonreset
selectonselect
submitonsubmit
unloadonunload
Attribut (AttributeBalise (Tag)Description de l’événement
onblur<a>
<button>
<input>
<textarea>
<select>
Lorsque la balise <a> perd de son focus.
Lorsque la balise <button> perd de son focus.
Lorsque la balise <input> perd de son focus
Lorsque la balise <textarea> perd de son focus
Lorsque la balise <select> perd de son focus
onchange<input>
<textarea>
<select>
Lorsque la balise <input> est modifiée et perd de son focus.
Lorsque la balise <textarea> change et perd de sa focus.
Lorsque la balise <select> est modifiée et perd de son focus.
onclick<a>
<input>
Lorsque l’utilisateur clique sur la balise <a>.
Lorsque la balise <input> est cliquée.
ondblclickLa plupart des balisesLorsque l’utilisateur double-clique sur le bouton gauche de la souris.
onfocus<a>
<input>
<textarea>
<select>
Lorsque la balise <a> prend son focus.
Lorsque la balise <input> prend son focus.
onkeydown<body>
éléments de <form>
Lorsqu’une touche du clavier est enfoncée
onkeypress<body>
éléments de <form>
Lorsqu’une touche du clavier est pressée et relâchée
onkeyup<body>
éléments de <form>
Lorsqu’une touche du clavier est relâchée
onload<body>Lorsque chargement du document est terminé
onmousedownLa plupart des balisesLorsque l’utilisateur clique sur le bouton gauche de la souris
onmouseupLa plupart des balisesLorsque l’utilisateur relâche le bouton gauche de la souris
onmousemoveLa plupart des balisesLorsque l’utilisateur déplace le curseur de la souris sur l’élément
onmouseoverLa plupart des balisesLorsque le curseur de la souris est déplacé sur l’élément
onmouseoutLa plupart des balisesLorsque le curseur de la souris est éloigné de l’élément (il sort de l’élément).
onreset<form>Lorsque le bouton de réinitialisation est cliqué
onselect<input>
<textarea>
Lorsque le curseur de la souris est déplacé sur la balise <input> ou que le texte est sélectionné dans la zone de texte <textarea>.
onsubmit<form>Lorsque le bouton de type= »submit » est pressé
onunload<body>Lorsque l’utilisateur quitte le document

Le tableau ci-dessous énumère les attributs des événements et leurs balises correspondantes en HTML :

Le processus consistant à associer un gestionnaire d’événements à un événement est connu sous le nom d’enregistrement. Il existe trois façons d’enregistrer un gestionnaire d’événements dans le modèle d’événement DOM.

1. La première consiste à attribuer le script de gestion d’événements à un attribut de balise d’événement, comme indiqué ci-dessous :

// Au clic du bouton on exécutera la fonction func1()
<input type=”button” value=”Cliquez ici” onclick=”func1( );” />

Dans le code ci-dessus, le gestionnaire d’événement func1 est attribué à l’attribut d’événement onclick d’un bouton.

2. La deuxième façon consiste à affecter le gestionnaire d’événement à la propriété d’événement de l’élément, comme indiqué ci-dessous :

// Au clic de l'élément on exécutera la fonction func1()
document.getElementById(ID_de_Element).onclick = func1;

3. Enfin la troisième façon et la plus communément utilisée depuis ES6 et d’utiliser ce qu’on appelle un écouteur d’événement.

// Au clic de l'élément on exécutera la fonction func1()
const element = document.querySelector("ID_ou_Class_Element");
element.addEventListener('click', func1);

Les trois manières fonctionnent et selon le contexte vous pourrez être amené à rencontrer et utiliser l’une des trois. Mais gardez en mémoire que c’est la dernière façon qui est préconisée.

 

1 réflexion au sujet de « Quels sont les différents événements supportés par JavaScript ? »

Laisser un commentaire