Explication détaillée de l'utilisation des événements de survol en JavaScript-js tutoriel-php.cn

Explication détaillée de l'utilisation des événements de survol en JavaScript

不言

Libérer： 2019-01-07 15:27:23

original

26923 Les gens l'ont consulté

L'événement mouseover est un événement déclenché lorsque le curseur de la souris chevauche l'élément représenté par son nom. Dans cet article, nous présenterons en détail l'utilisation des événements mouseover en JavaScript.

Explication détaillée de l'utilisation des événements de survol en JavaScript

Jetons un coup d'oeil d'abord Qu'est-ce que onmouseover ?

L'activité mouseover est "l'événement" et onmouseover est le gestionnaire d'événements.

Les gestionnaires d'événements doivent spécifier le processus à exécuter lorsqu'un événement se produit.

Onmouseover est donc un gestionnaire d'événements qui est responsable du traitement terminé lorsque le curseur de la souris survole un élément.

Qu'est-ce que onmouseleave ?

En plus de onmouseover, il y a aussi onmouseleave.

Comme son nom l'indique, il gère les événements qui sont déclenchés lorsque le curseur de la souris quitte un élément.

Ces deux attributs seront utilisés dans l'exemple suivant. Regardons le code d'utilisation de l'événement mouseover

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
     <div id="div1" style="width: 150px; height: 150px; padding: 10px; background-color:pink; border: 1px solid #000000" onmouseover="over(this)" onmouseleave="leave(this)"></div>
</body>
<script>
    function over(x) {
        x.style.backgroundColor = "blue";
    }
 
    function leave(x) {
        x.style.backgroundColor = "red";
    }
</script>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons d'abord une balise div en utilisant A. carré simple.

La couleur de fond du bloc est attribuée au rose clair.

Explication détaillée de lutilisation des événements de survol en JavaScript

Ensuite, nous enregistrons le gestionnaire d'événements en utilisant l'attribut d'événement HTML.

Comme indiqué dans le code, l'attribut onmouseover et l'attribut onmouseleave ont été ajoutés au code de la balise div.

L'attribut onmouseover spécifie la fonction over qui est activée lorsque le curseur de la souris est sur le carré.

onmouseover="over(this)"

Copier après la connexion

est dans le paramètre de la fonction over, ce qui indique que l'élément div lui-même est le paramètre de la fonction over. La fonction

over accède à la propriété style.backgroundColor de l'élément div et définit la couleur d'arrière-plan du carré sur bleu.

Explication détaillée de l'utilisation des événements de survol en JavaScript

Spécifiez la fonction Leave pour l'attribut onmouseleave.

Comme la fonction over, la fonction Leave peut également accéder à la propriété style.backgroundColor de l'élément div et définir la couleur d'arrière-plan du carré sur rouge.

Explication détaillée de l'utilisation des événements de survol en JavaScript