Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. Les événements JavaScript
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

Les événements JavaScript

Comprendre les événements

Tout le code JavaScript que nous avons vu dans les chapitres précédents ne s’exécute qu’une seule fois, au chargement de la page. C’est donc une utilisation extrêmement limitée, il n’y a aucune interaction avec l’utilisateur de la page. Un des objectifs du JavaScript est de dynamiser la page, de proposer des interactions avec les utilisateurs.

Or, comment interagir avec ces utilisateurs  ? Eh bien, par l’intermédiaire d’événements. Les événements se produisent à tout moment dans une page, par exemple lorsque le pointeur de la souris se déplace sur la page, quand il passe au-dessus d’un élément et quand il en sort, quand l’utilisateur clique sur un bouton. Mais vous avez aussi des événements qui sont déclenchés avec le clavier, comme appuyer sur une touche ou relâcher cette touche du clavier. Donc, il y a en permanence des événements qui se produisent dans une page web.

Aussi, pour nous, la seule question qu’il faut se poser est : à quels événements nous devons réagir et de quelle manière ? Pour réagir à un événement, il faudra être à son écoute, il faudra gérer un écouteur spécifique à cet événement.

Utiliser un bouton déclencheur d’action

1. Réagir au clic sur un bouton

Dans cet exemple très simple, nous allons réagir au clic de l’utilisateur sur un bouton de la page.

Voici la structure de la page et celle du bouton :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <p>Integer posuere erat a ante venenatis...</p> 
        <button id="monBouton">Cliquez-moi</button> 
    </body> 
</html>
 

Le bouton possède l’identifiant id="monBouton".

Voilà le code JavaScript utilisé dans cette page :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <p>Integer posuere erat a ante venenatis...</p> 
        <button id="monBouton">Cliquez-moi</button> 
        <script> 
            var...

Utiliser d’autres événements

1. Les événements à écouter

Nous avons de nombreux événements à écouter à notre disposition : https://developer.mozilla.org/fr/docs/Web/Events

Voici ceux liés au pointeur de la souris :https://developer.mozilla.org/fr/docs/Web/API/MouseEvent

Nous n’allons bien sûr pas les passer tous en revue, ils sont simples à mettre en œuvre.

2. Le pointeur "au-dessus"

Le premier événement que nous allons aborder, c’est le simple fait de passer le pointeur de la souris au-dessus d’un élément identifié. C’est l’événement mouseover.

Voici l’élément ciblé, un simple paragraphe ayant l’identifiant para :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <p id="para">Integer posuere erat a ante venenatis...</p> 
    </body> 
</html>
 

Et voici le code JavaScript utilisé :


<script> 
    var monElement = document.getElementById("para") ; 
    monElement.addEventListener("mouseover",monAlerte,false) ; 
    function monAlerte(){ 
        ...