Ajoute des antislashs dans une chaîne
Les événements (clic ou survol de souris, focus, chargement, etc.) sont des actions qui peuvent être détectées par JavaScript
Un événement est quelque chose qui se produit lorsque l'utilisateur interagit avec la page Web, par exemple lorsqu'il clique sur un lien ou un bouton, saisit du texte dans un champ de saisie ou une zone de texte, effectue une sélection dans une boîte de sélection, appuie sur une touche du clavier, déplace le pointeur de la souris, soumet un formulaire, etc. Dans certains cas, le navigateur lui-même peut déclencher les événements, tels que les événements de chargement et de déchargement de la page.
Lorsqu'un événement se produit, vous pouvez utiliser un gestionnaire d'événements JavaScript (ou un écouteur d'événements) pour le détecter et exécuter une tâche spécifique ou un ensemble de tâches. Par convention, les noms des gestionnaires d'événements commencent toujours par le mot "on". Ainsi, un gestionnaire d'événements pour l'événement "click" est appelé onclick, de même qu'un gestionnaire d'événements pour l'événement "load" est appelé onload, un gestionnaire d'événements pour l'événement "blur" est appelé onblur, et ainsi de suite.
Il existe plusieurs façons d'attribuer un gestionnaire d'événements. La plus simple consiste à les ajouter directement à la balise de début des éléments HTML à l'aide des attributs spéciaux event-handler. Par exemple, pour attribuer un gestionnaire de clic à un élément de type bouton, nous pouvons utiliser l'attribut onclick, comme ceci :
<button type="button" onclick="alert('Bonjour le Monde!')">Clique ici</button>
Dans Javascript, tout un ensemble de commandes permet de capter ces événements et d'en faire usage dans des scripts pour rendre la page web interactive, pour manipuler des objets ou adaptée aux besoins ou aux spécificités d'une application.
Note :
Les événements sont normalement employés en combinaison avec des fonctions, et la fonction ne sera pas exécutée avant que l'événement ne se produise.
Toutefois, pour séparer le JavaScript du HTML, vous pouvez configurer le gestionnaire d'événements dans un fichier JavaScript externe ou dans les balises <script> et </script>, comme ceci :
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="monBouton">Cliquez</button>
<script>
function direBonjour(){
alert('Bonjour le Monde!');
}
document.getElementById("monBouton").onclick = direBonjour;
</script>
</script>
</body>
</html>
Remarque : les attributs HTML n'étant pas sensibles à la casse, onclick peut également s'écrire onClick, OnClick ou ONCLICK. Mais attention sa valeur qui est entre les guillemets est sensible à la casse.
Les événements onLoad et onUnload sont déclenchés quand l'utilisateur appelle ou ferme une page Web.
L'événement onLoad est souvent employé pour vérifier le type la version du navigateur du visiteur, et charge la version appropriée de la page Web basée sur l'information recueillée.
Les événements onLoad et onUnload sont également souvent employés pour traiter les cookies qui devraient être placés quand une page est chargée. Par exemple, vous pourriez avoir un popup demandant le nom d'utilisateur sur sa première arrivée à votre page. Le nom est alors stocké dans un cookie. La prochaine fois que le visiteur arrive sur votre page, vous pourrait avoir un autre popup lui souhaitant bienvenue !.
Syntaxe général de l'événement onload et l'événement onunload:
onload="Instruction"
onunload="Instruction"
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Evénement onload de javascript </title>
</head>
<body onload="window.alert('La page est chargée avec succès!');">
<h1>Ceci est le titre de la page</h1>
<p>Et ici est le texte du paragraphe.</p>
</body>
</html>
Les événements onFocus, onBlur et onChange sont souvent employés en combinaison avec la validation des champs d’un formulaire.
Syntaxe général des événements onFocus, onBlur et onChange:
onfocus="Instruction"
onBlur="Instruction"
onchange="Instruction"
L'événement change se produit lorsqu'un utilisateur modifie la valeur d'un élément de formulaire.
Vous pouvez gérer l'événement de modification avec le gestionnaire d'événements onchange.
L'événement onchange : Cet événement détecte le changement de valeur de tout élément listé dans cet événement.
L'exemple suivant vous montre un message d'alerte lorsque vous modifiez l'option dans la boîte de sélection.
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Evénement onchange de javascript </title>
</head>
<body>
<select onchange="alert('Vous avez changé la sélection !');">
<option>selection1</option>
<option>selection2</option>
<option>selection3</option>
</select>
<p><strong>Note:</strong> Sélectionnez une option dans la boîte de sélection pour voir comment ça fonctionne.</p>
</body>
</html>
Ci-dessous un exemple de la façon d’employer l'événement onChange avec la fonction checkEmail(). La fonction s'appellera toutes les fois que l'utilisateur change le contenu du champ pour saisir son email:
<input type="text" size="30" id="email" onchange="checkEmail()">
Voir notre article pour la fonction chekEmail Validation email en javascript
L'événement onSubmit est employé pour valider tous les champs d’un formulaire avant de le soumettre.
Syntaxe :
onsubmit="Instruction"
Le déclencheur de l'événement onsubmit est basé sur la fonction submit à chaque fois que la demande du client utilisateur est soumise au serveur sous forme de données ou que la demande du client est censée être annulée ou interrompue lors de la soumission des données en JavaScript
Voici un exemple qui fait appel à une boite d'alerte
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr"><head>
<meta charset="utf-8">
<title>Exemple l'événement onsubmit de JavaScript</title>
</head>
<body>
<p>Bienvenue dans mon domaine.</p>
<p>Passez une bonne journée.</p>
<form id="first" action="#" onsubmit = "alert('Le formulaire a été envoyé avec succès')">
Entrer votre nom: <input type="text"name="fname">
<input type="submit"value="Envoyer">
</form>
</body>
</html>
Ci-dessous un autre exemple de l'événement onSubmit, mais qui fait appel à une fonction.
La fonction checkForm() s'appellera quand l'utilisateur clique sur le bouton de soumission sous le formulaire. La fonction checkForm() renvoie vrai ou faux. S'il renvoie vrai le formulaire sera soumis, si non la soumission sera décommandée :
Code
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"><head> <meta charset="utf-8"> <title>Exemple l'événement onsubmit de JavaScript</title> </head> <body> <p>Bienvenue dans mon domaine.</p> <p>Passez une bonne journée.</p> <form id="first" action="#" onsubmit = "checkForm()"> Entrer votre nom: <input type="text"name="fname"> <input type="submit"value="Envoyer"> </form> </body> </html>
Pour en savoir sur la fonction checkForm() voir notre tutoriel:validation d'un formulaire en javascript
onMouseOver et onMouseOut sont employés souvent pour créer des boutons animés.
Syntaxe :
onmouseover="Instruction" onmouseout="Instruction"
Ci-dessous un exemple d'un événement onMouseOver. Une boîte alerte apparaît quand un événement onMouseOver est détecté :
<a href="https://www.oujood.com" onmouseover="alert('C’est un événement onMouseOver ');return false"> https://www.oujood.com </a>
Pour en savoir plus sur les événements de la souris, voir notre artile sur ce sujet
Nous allons voir dans un prochain chapitre les fonctions
Par carabde 30 mars 2014 mis à jour le 6 Fevrier 2022