Événement Mouseover en JavaScript

L’événement mouseover se produit lorsqu’un périphérique de pointage déplace le curseur vers un élément d’une page Web.

Dans ce tutoriel, nous allons implémenter l’événement mouseover en utilisant JavaScript.

Pour cela, nous pouvons utiliser le addEventListener() pour ajouter l’événement mouseover requis sur l’élément requis.

Vérifiez l’exemple ci-dessous.

• HTML

<ul id="example">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

• JavaScript

let test = document.getElementById('example');

test.addEventListener('mouseover', function(event) {
  // highlight the mouseover target
  event.target.style.color = 'red';
}, false);

test.addEventListener('mouseout', function(event) {
  // highlight the mouseout target
  event.target.style.color = 'black';
}, false);

Dans le code ci-dessus, nous récupérons l’élément requis sur lequel nous souhaitons déplacer le curseur à l’aide de la fonction getElementById(). Nous procédons ensuite à l’application de la méthode addEventListener() à cet élément, qui attache un gestionnaire d’événement donné à cet élément.

Lorsque l’événement fourni est envoyé à la cible, la méthode EventTarget addEventListener() crée une fonction qui sera invoquée. Ici, les méthodes mouseover et mouseout sont invoquées, respectivement.

L’événement mouseover déplace le curseur sur l’élément donné. L’événement mouseout éloigne le curseur de cet élément.

La propriété event.target.style.color spécifie la couleur lors de l’appel des méthodes cibles spécifiques telles que mouseover ou mouseout.