image_pdf

Programmation évènementielle

image_pdf

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

La méthode getElementById La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id. Syntaxe informations à récupérer = document.getElementBy...
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é...
Les méthodes setTimeout() et setInterval() Voici deux fonctions très utiles qui permettent d'exécuter des fonctions dans un délai précisé en millisecondes. setTimeout("MaFonction()", 3000); Exécutera MaFonction() dan...
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. ...
Contrôle des formulaires avec JavaScript Contrôle d'un formulaire de contact avec l'évènement submit Voici un exemple où le JavaScript bloque l'action du formulaire tant que les champs ne sont pas valides. Quelqu...