oujood.com

les événements de Javascript

Les événements (clic ou survol de souris, focus, chargement, etc.) sont des actions qui peuvent être détectées par JavaScript

Le concept des événements et des gestionnaires d'événements

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>

Événements de Javascript

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.

Exemples des événements :

  • Un clic de souris
  • Le chargement d’une page Web ou d'image
  • Survol de souris au-dessus d'un point chaud sur la page Web
  • Sélection d'un champ d'entrée dans un formulaire HTML
  • Soumission d’un formulaire HTML

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

  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

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

  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>

onFocus, onBlur et onChange

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 onChange

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

  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

Javascript l'événement OnSubmit

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

  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

  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

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="http://www.oujood.com" onmouseover="alert('C’est un événement onMouseOver ');return false"> http://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


Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction count_chars

Retourne des statistiques sur les caractères utilisés dans une chaîne

Selecteurs jQuery

Les selecteurs jQuery

fonction count_chars, count_chars

Retourne des statistiques sur les caractères utilisés dans une chaîne



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci