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(){ 
   ...