Programmation évènementielle

Il est possible de programmer des réactions suite à des actions de l'internaute. Les actions des utilisateurs sont appelées évènement. Voici quelques exemples :

  • Clic sur un bouton.
  • Touche du clavier enfoncée.
  • Focus dans un champ de texte.
  • Survol d'une image avec le pointeur.

La méthode addEventListener()

Syntaxe

Le principe est d'attacher un évènement à une balise avec la méthode addEventListener() :

balise.addEventListener(événement, fonction);

La balise peut notamment être désignée par la fameuse méthode getElementById.

Évènement click

Dans le code ci-dessous, on capte tous les clics de la souris sur une image, et on déclenche une boite d'alerte.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img src="chapeau.gif" id="chapeau">
    <script>
        document.getElementById("chapeau").addEventListener('click', function() {
            alert("clic !");
        });
    </script>
</body>
</html>

Ci-dessus, l'évènement click appelle une fonction anonyme qui affiche une simple boite d'alerte. On peut également appeler une fonction par son nom :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img src="chapeau.gif" id="chapeau">
    <script>
        document.getElementById("chapeau").addEventListener('click', FaisUnTruc);
        
        function FaisUnTruc() {
            alert('clic !');
        }
    </script>
</body>
</html>

Attention à l'ordre des choses

En JavaScript, il ne faut surtout pas utiliser document.getElementById() avant que l'id de la balise ne soit lu par le navigateur qui, je le rappelle, lit le code de haut en bas. De ce fait, si vous souhaitez mettre le code JavaScript dans l'entête, il conviendra d'utiliser l'évènement window.onload pour attendre que toutes les balises soient lues avant d' y effectuer des opérations.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        window.onload = function() {
            document.getElementById("chapeau").addEventListener('click', FaisUnTruc);
        }
        
        function FaisUnTruc() {
            alert('clic !');
        }
    </script>
</head>
<body>
    <img src="chapeau.gif" id="chapeau">
</body>
</html>

Évènements mouseover et mouseout

Il est possible de gérer plusieurs évènements sur le même objet. Dans l'exemple ci-dessous, on guette le survol du pointeur sur une image et son éloignement :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img src="chapeau.gif" id="chapeau">
    <p id="blabla"></p>
    <script>
        var chapeau = document.getElementById("chapeau");
        chapeau.addEventListener("click", function() { message('Vous avez cliqué'); });
        chapeau.addEventListener("mouseover", function() { message('Vous passez'); });
        chapeau.addEventListener("mouseout", function() { message('Vous repartez'); });
        
        function message(texte) {
            document.getElementById("blabla").innerHTML = texte;
        }
    </script>
</body>
</html>

Remarques :

  • La ligne var chapeau = document.getElementById("chapeau"); permet d'éviter les répétitions des document.getElementById.
  • Si vous souhaitez appeler une fonction avec un paramètre, vous devez l'insérer dans un fonction anonyme function() {...}

Profitons du JavaScript pour animer le survol d'une image. Voici l’exemple du rollover où le survol d'une image change sa source.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img src="chien.jpeg" id="photo" alt="chien ou chat">
    <script>
        document.getElementById("photo").addEventListener("mouseover", function() { ChangeImage("chien.jpeg"); });
        document.getElementById("photo").addEventListener("mouseout", function() { ChangeImage("chat.jpeg"); });

        function ChangeImage(image) {
            document.getElementById("photo").src = image;
        }
    </script>
</body>
</html>

Tableau des évènements

En attachant des évènements à des balises, le JavaScript vous permettra de réaliser vos rêves les plus fous (enfin presque). Voici les évènements les plus courants. Notez que ce tableau est loin d'être exhaustif, car il existe une centaine d'évènements.

ÉvènementsActions de l'utilisateurBalises concernées
blur Le focus quitte un champ de formulaireToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
change Le contenu d’un champ de formulaire est modifié. Voir un exemple ici.<input>, <select> et <textarea>
click L’utilisateur clique sur l’objetToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
focus Un champ de formulaire reçoit le focusToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
load Le chargement du contenu de la balise est terminé<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
mouseout La souris quitte l’objetToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
mouseover La souris arrive au-dessus de l’objetToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
reset Annulation d’un formulaire (clic sur un bouton reset)<form> et <keygen>
select Sélection de texte<input type="file">, <input type="password">, <input type="text">, <keygen> et <textarea>
submit Envoi d’un formulaire si aucune valeur false n'est retournée. Voir un exemple ici.<form> et <keygen>
unload L’internaute quitte la page<body>
keyupUne touche du clavier est relâchéeToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
keydownUne touche du clavier est enfoncéeToutes les balises sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>

Articles connexes

Les fonctions Une fonction est une liste d'instructions ayant un but précis et que l'on utilise fréquemment. L'intérêt est d'éviter les répétitions dans vos codes, et de gagner en lisibilité. L...
jQuery jQuery est une bibliothèque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus. ...
Lightbox simple avec jQuery Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images. Créez un dossier nommé Lightbox puis un sous-dossier img qui va contenir les images. Les v...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....
Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...