Les événements dans une page HTML [Spécialité NSI - Année 2025

Les événements dans une page HTML

Une description par l'exemple

Un événement est, par exemple :

le chargement d'une page,
le passage du pointeur de la souris sur la page ou un élément de la page,
un clic avec la souris...

Un événement permet de déclencher l'exécution d'une fonction. Pour cela, un événement est ajouté à un élément de la page, une balise par exemple, et lorsque l'utilisateur agit sur l'élément d'une certaine manière, il déclenche le code JavaScript associé.

Le chargement d'une page est un événement qui s'appelle Load.

Reprenons l'exemple précédent et supprimons l'appel à la fonction dans le bloc JavaScript. À la place, nous ajoutons dans la balise <body> un attribut onLoad, formé du mot "on" et du nom de l'événement "Load" correspondant au chargement de la page. La valeur de l'attribut est le code JavaScript rebours(n).

<html>
<head>
	<title>Ma Page avec une fonction rebours au chargement de la page</title>
	<script language="JavaScript">
   function rebours(x){
      while (x >= 0){
         alert(x)
         x--
         }
      }
   n = prompt("Saisir un nombre entier","nombre")
    </script>
</head>
<body onLoad = "rebours(n)">
	<p>Ma Page avec une fonction rebours au chargement de la page</p>
</body>
</html>

<html>
<head>
	<title>Ma Page avec une fonction rebours au chargement de la page</title>
	<script language="JavaScript">
   function rebours(x){
      while (x >= 0){
         alert(x)
         x--
         }
      }
   n = prompt("Saisir un nombre entier","nombre")
    </script>
</head>

<body onLoad = "rebours(n)">
	<p>Ma Page avec une fonction rebours au chargement de la page</p>
</body>

</html>

Principaux événements

load: l’événement load est émis lorsqu'une ressource et ses ressources dépendantes sont complètement chargées.
mouseover : l'événement mouseover est déclenché lorsqu'un dispositif de pointage passe au dessus d'un élément lié à l'écouteur d'événement, ou au dessus de l'un de ses enfants.
mouseout : l'événement mouseout est déclenché quand un outil de pointage (généralement une souris) est déplacé hors de l'élément mis sur écoute ou un de ses enfants.
keypress : l'événement keypress est déclenché lorsqu'une touche produisant une valeur de caractère est enfoncée. Des exemples de touches produisant une valeur de caractère sont les touches alphabétiques, numériques et de ponctuation. Des exemples de touches ne produisant pas de valeur de caractère sont des touches de modification telles que Alt, Shift, Ctrl, ou Meta.
Click : Clic avec la souris, sélection d'un élément
Dblclick : double-clic sur l'élément
Focus : Ciblage de l'élément
Blur : Annulation du ciblage de l'élément

Vous trouverez une liste d'événements sur le site w3schools ou encore sur le site MDN.

Exemple : Gestion d'un événement par l'exemple...

Dans l'exemple qui suit, un attribut, formé du mot "on" et du nom de l’événement est ajouté dans élément défini par une balise. La valeur de l'attribut est le code JavaScript qui appelle une fonction message().

Pour bien comprendre ces exemples, il faut s’entraîner avec d'autres événements dans d'autres balises et en testant d'autres fonctions pour chaque événement :

<html>
<head>
	<title>Ma page avec un message</title>
    <script language="JavaScript">
        function message(){
            alert("Un évenement s'est produit");
            }
    </script>
    </head>
<body>
	<p onClick="message()">Cliquer</p>
	<p onDblclick="message()">Double-Cliquer</p>
	<h3 onMouseOver="message()">Approcher le curseur</h3>
	<h3 onMouseOut="message()">Éloigner le curseur</h3>
    	Taper sur une touche <input type="text" onKeypress="message()">
</body>

<html>

<head>
	<title>Ma page avec un message</title>
    <script language="JavaScript">
        function message(){
            alert("Un évenement s'est produit");
            }
    </script>
    </head>

<body>
	<p onClick="message()">Cliquer</p>
	<p onDblclick="message()">Double-Cliquer</p>
	<h3 onMouseOver="message()">Approcher le curseur</h3>
	<h3 onMouseOut="message()">Éloigner le curseur</h3>
    	Taper sur une touche <input type="text" onKeypress="message()">
</body>