Maison > Article > interface Web > Explication détaillée de l'utilisation des événements de survol en JavaScript
Explication détaillée de l'utilisation des événements de survol en JavaScript
- 不言original
- 2019-01-07 15:27:2326942parcourir
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.
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>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.
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)"
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.
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.
En faisant cela, le carré initialement rose devient bleu lorsque le curseur est placé sur le carré, et devient rouge lorsqu'il s'éloigne du carré.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!