Événements JavaScript

Comprendre les événements et les 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 une zone de saisie ou une zone de texte, effectue une sélection dans une zone 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 les détecter et effectuer 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", donc un gestionnaire d'événements pour l'événement click est appelé onclick, de même 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, etc. sur.

Il existe plusieurs façons d'affecter un gestionnaire d'événements. Le moyen le plus simple consiste à les ajouter directement à la balise de début des éléments HTML à l'aide des attributs spéciaux du gestionnaire d'événements. Par exemple, pour affecter un gestionnaire de clic à un élément de bouton, nous pouvons utiliser un attribut onclick, comme ceci :

<button type="button" onclick="alert('Hello World!')">Click Me</button>

Cependant, 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 :

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

Remarque : étant donné que les attributs HTML ne sont pas sensibles à la casse, ils peuvent également être écrits sous la forme onClick, OnClick, onclick ou ONCLICK. Mais sa valeur est sensible à la casse.

En général, les événements peuvent être classés en quatre groupes principaux : événements de la souris , événements de clavier , événements de formulaire et événements de document/fenêtre . Il existe de nombreux autres événements, nous en apprendrons davantage dans les chapitres suivants. La section suivante vous donnera un bref aperçu des événements les plus utiles, un par un, ainsi que des exemples pratiques réels.

Événements de la souris

Un événement de la souris est déclenché lorsque l'utilisateur clique sur un élément, déplace le pointeur de la souris sur un élément, etc. Voici quelques événements de la souris les plus importants et leur gestionnaire d'événements.

L'événement de clic (onclick)

L'événement click se produit lorsqu'un utilisateur clique sur un élément d'une page Web. Il s'agit souvent d'éléments de formulaire et de liens. Vous pouvez gérer un événement de clic avec un gestionnaire d'événements onclick.

L'exemple suivant vous montrera un message d'alerte lorsque vous cliquerez sur les éléments.

<button type="button" onclick="alert('Vous avez cliquez un bouton!');">Click Moi</button>
<a href="#" onclick="alert('Vous avez cliquer un lien!');">Click Moi</a>

L'événement de menu contextuel (oncontextmenu)

L'événement contextmenu se produit lorsqu'un utilisateur clique avec le bouton droit de la souris sur un élément pour ouvrir un menu contextuel. Vous pouvez gérer un événement contextmenu avec un gestionnaire d'événements oncontextmenu.

L'exemple suivant affichera un message d'alerte lorsque vous cliquez avec le bouton droit sur les éléments.

ExempleEssayez ce code »

<button type="button" oncontextmenu="alert('Vous avez cliqué le bouton droit de la souris!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('Vous avez cliqué le bouton droit de la souris sur ce lien!');">Right Click on Me</a>

L'événement Mouseover (onmouseover)

L'événement mouseover se produit lorsqu'un utilisateur déplace le pointeur de la souris sur un élément.

Vous pouvez gérer l'événement mouseover avec le gestionnaire d'événements onmouseover. L'exemple suivant vous montrera un message d'alerte lorsque vous placez la souris sur les éléments.

<button type="button" onmouseover="alert('Vous avez placé la souris sur un bouton!');">Place Mouse Over Me</button>

<a href="#" onmouseover="alert('Vous avez placé la souris sur un lien!');">Place Mouse Over Me</a>

L'événement Mouseout (onmouseout)

L'événement mouseout se produit lorsqu'un utilisateur déplace le pointeur de la souris en dehors d'un élément.

Vous pouvez gérer l'événement mouseout avec le gestionnaire d'événements onmouseout. L'exemple suivant affiche un message d'alerte lorsque l'événement mouseout se produit.

<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>

Événements de clavier

Un événement clavier est déclenché lorsque l'utilisateur appuie ou relâche une touche du clavier. Voici quelques événements de clavier les plus importants et leur gestionnaire d'événements.

L'événement Keydown (onkeydown)

L'événement keydown se produit lorsque l'utilisateur appuie sur une touche du clavier.

Vous pouvez gérer l'événement keydown avec le gestionnaire d'événements onkeydown. L'exemple suivant vous montrera un message d'alerte lorsque l'événement keydown se produit.

<input type="text" onkeydown="alert('Vous avez appuyé sur une touche dans le champ de text!')">
<textarea onkeydown="alert('Vous avez appuyé sur une touche dans le  textarea!')"></textarea>

L'événement Keyup (onkeyup)

L'événement keyup se produit lorsque l'utilisateur relâche une touche du clavier.

Vous pouvez gérer l'événement keyup avec le onkeyupgestionnaire d'événements. L'exemple suivant affiche un message d'alerte lorsque l'événement keyup se produit.

<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>

L'événement Keypress (onkeypress)

L'événement keypress se produit lorsqu'un utilisateur appuie sur une touche du clavier à laquelle est associée une valeur de caractère. Par exemple, les touches telles que Ctrl, Maj, Alt, Échap, les touches fléchées, etc. ne généreront pas d'événement d'appui sur une touche, mais généreront un événement keydown et keyup.

Vous pouvez gérer l'événement keypress avec le gestionnaire d'événements onkeypress.

Événements du formulaire

Un événement de formulaire est déclenché lorsqu'un contrôle de formulaire reçoit ou perd le focus ou lorsque l'utilisateur modifie une valeur de contrôle de formulaire, par exemple en tapant du texte dans une entrée de texte, en sélectionnant une option dans une zone de sélection, etc. Voici quelques événements de formulaire les plus importants et leur gestionnaire d'événements.

L'événement Focus (onfocus)

L'événement de focus se produit lorsque l'utilisateur donne le focus à un élément d'une page Web.

Vous pouvez gérer l'événement focus avec le gestionnaire d'événements onfocus. L'exemple suivant mettra en surbrillance l'arrière-plan de la saisie de texte en couleur jaune lorsqu'il reçoit le focus.

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>

Remarque : La valeur du mot-clé this dans un gestionnaire d'événements fait référence à l'élément qui contient le gestionnaire (c'est-à-dire où l'événement est actuellement livré).

L'événement de flou (onblur)

L'événement de flou se produit lorsque l'utilisateur détourne le focus d'un élément de formulaire ou d'une fenêtre.

Vous pouvez gérer l'événement de flou avec le gestionnaire d'événements onblur.

Pour retirer le focus d'un élément de formulaire, cliquez d'abord à l'intérieur de celui-ci, puis appuyez sur la touche de tabulation du clavier, donnez le focus à autre chose ou cliquez en dehors de celui-ci.

L'événement de changement (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'exemple suivant affiche un message d'alerte lorsque vous modifiez l'option dans la zone de sélection.

<select onchange="alert('Vous avez changé la selection!');">
    <option>Choisir</option>
    <option>Homme</option>
    <option>Femme</option>
</select>

L'événement de soumission (onsubmit)

L'événement submit ne se produit que lorsque l'utilisateur soumet un formulaire sur une page Web.

Vous pouvez gérer l'événement submit avec le gestionnaire d'événements onsubmit. L'exemple suivant vous montrera un message d'alerte lors de la soumission du formulaire au serveur.

<form action="action.php" method="post" onsubmit="alert('Les données du formulaire seront envoyé au serveur!');">
    <label>First Name:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>

Événements de document/fenêtre

Les événements sont également déclenchés dans des situations où la page est chargée ou lorsque l'utilisateur redimensionne la fenêtre du navigateur, etc. Voici quelques événements de document/fenêtre les plus importants et leur gestionnaire d'événements.

L'événement de chargement (onload)

L'événement load se produit lorsqu'une page Web a fini de se charger dans le navigateur Web.

Vous pouvez gérer l'événement load avec le gestionnaire d'événements onload. L'exemple suivant vous montrera un message d'alerte dès que la page aura fini de se charger.

<body onload="window.alert('Page is loaded successfully!');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
</body>

L'événement de déchargement (onunload)

L'événement de déchargement se produit lorsqu'un utilisateur quitte la page Web en cours.

Vous pouvez gérer l'événement de déchargement avec le gestionnaire d'événements onunload. L'exemple suivant vous montrera un message d'alerte lorsque vous essayez de quitter la page.

<body onunload="alert('Etes vous sûr de vouloir quitter cette page?');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
</body>

L'événement de redimensionnement (onresize)

L'événement de redimensionnement se produit lorsqu'un utilisateur redimensionne la fenêtre du navigateur. L'événement de redimensionnement se produit également dans des situations où la fenêtre du navigateur est réduite ou agrandie.

Vous pouvez gérer l'événement de redimensionnement avec le gestionnaire d'événements onresize. L'exemple suivant affiche un message d'alerte lorsque vous redimensionnez la fenêtre du navigateur à une nouvelle largeur et hauteur.

<p id="result"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = txt;
    }
    window.onresize = displayWindowSize;
</script>