Les événements déclencheurs¶

Les événements sont des actions effectuées par l'utilisateur: touche du clavier, mouvement de souris, clic de souris, etc.

Ce peut aussi être des actions détectées par le navigateur : page web chargée, défilement de la page, taille de fenêtre modifiée, etc.

Ils sont détectés dans le HTML et peuvent déclencher l'exécution d'une fonction Javascript.

Exemples d'événements :

Événement	Description
onload	Appelé lorsque l'élément fini de charger dans la page. Il est plus souvent utilisé sur la balise `<body>` pour lancer un script lorsque la page complète fini de charger. `<body onload="executerApresChargement()">`
onclick	Appelé lorsque l'élément est cliqué (bouton gauche de la souris appuyé et relâché). `<p onclick="afficherSuite()">Cliquer le paragraphe pour lancer le script.</p>`
onmouseover	Appelé lorsque la souris passe au-dessus d'un élément. `<img onmouseover="transformerBigImg()" src="smiley.gif" alt="Smiley">`
onchange	Appelé lorsque un champ de formulaire change de valeur puis perd le focus. `<input type="text" onchange="validerValeur()">`
oninput	Appelé immédiatement lorsque un champ de formulaire change de valeur. `<input type="text" oninput="afficherValeursPossibles()">`

Exécuter du code sur un événement¶

On utilise des événements dans le code pour pouvoir réagir et lancer un script de fonctionnalité quand l'événement est détecté.

On doit donc avoir :

Une fonction javascript qui attend d'être appelée
Un événement lié à une balise HTML

Méthode 1 : l'événement est déclaré dans le HTML¶

Exemple :

/*Une fonction javascript qui affiche un message à l'écran*/
function afficherMessageBonjour() {
    alert("Bonjour et bienvenue");
}

<!--Bouton HTML qui détecte l'événement et déclenche la fonction-->
<button type="button" onclick="afficherMessageBonjour()">Bonjour</button>

Méthode 2 : l'événement est déclaré en Javascript¶

Exemple :

<!--Bouton HTML-->
<button id="btnMessage" type="button">Bonjour</button>

/*Une fonction javascript qui affiche un message à l'écran*/
function afficherMessageBonjour() {
    alert("Bonjour et bienvenue");
}
/*Lier l'événement au bouton par Javascript*/
document.getElementById("btnMessage").addEventListener("click", afficherMessageBonjour);