Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von Mouseover-Ereignissen in JavaScript
Detaillierte Erläuterung der Verwendung von Mouseover-Ereignissen in JavaScript
- 不言Original
- 2019-01-07 15:27:2326942Durchsuche
Das Mouseover-Ereignis ist ein Ereignis, das ausgelöst wird, wenn der Mauszeiger mit dem durch seinen Namen dargestellten Element überlappt. In diesem Artikel stellen wir die Verwendung von Mouseover-Ereignissen in JavaScript ausführlich vor.
Lass uns zuerst einen Blick darauf werfen Was ist Onmouseover?
Die Mouseover-Aktivität ist das „Ereignis“ und onmouseover ist der Ereignishandler.
Ereignishandler sind erforderlich, um den Prozess anzugeben, der ausgeführt werden soll, wenn ein Ereignis auftritt.
Onmouseover ist also ein Ereignishandler, der für die abgeschlossene Verarbeitung verantwortlich ist, wenn der Mauszeiger über einem Element schwebt.
Was ist Onmouseleave?
Zusätzlich zu onmouseover gibt es auch onmouseleave.
Wie der Name schon sagt, verarbeitet es Ereignisse, die ausgelöst werden, wenn der Mauszeiger ein Element verlässt.
Diese beiden Attribute werden im folgenden Beispiel verwendet. Schauen wir uns den Verwendungscode des Maus-Hover-Ereignisses an
<!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>Im obigen Code erstellen wir zunächst ein einfaches using-div-Tag von quadrat.
Die Hintergrundfarbe des Blocks ist als hellrosa angegeben.
Anschließend registrieren wir den Event-Handler mithilfe des HTML-Event-Attributs.
Wie im Code gezeigt, wurden das onmouseover-Attribut und das onmouseleave-Attribut zum Code des div-Tags hinzugefügt.
Das onmouseover-Attribut gibt die Over-Funktion an, die aktiviert wird, wenn sich der Mauszeiger auf dem Block befindet.
onmouseover="over(this)"
befindet sich im Parameter der Überfunktion, was darauf hinweist, dass das div-Element selbst der Parameter der Überfunktion ist. Die Funktion
over greift auf die Eigenschaft style.backgroundColor des div-Elements zu und setzt die Hintergrundfarbe des Quadrats auf Blau.
Geben Sie die Urlaubsfunktion für das onmouseleave-Attribut an.
Wie die Over-Funktion kann auch die Leave-Funktion auf die style.backgroundColor-Eigenschaft des div-Elements zugreifen und die Hintergrundfarbe des Quadrats auf Rot setzen.
Auf diese Weise wird das ursprünglich rosa Quadrat blau, wenn der Cursor auf dem Quadrat platziert wird, und rot, wenn er vom Quadrat wegbewegt wird.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Mouseover-Ereignissen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!