JavaScript/DOM/Event/mouseenter
Aus SELFHTML-Wiki
< JavaScript | DOM | Event
Der mouseenter-Event-Handler wird beim Überfahren des Elements mit der Maus ausgelöst. Wenn die Maus das Element wieder verlässt, wird mouseleave ausgelöst.
| bubbles |
nein |
|---|---|
| cancelable |
nein |
| mögliche Auslöser |
allen Elementen außer |
| Event-Objekt |
Maus-Event |
Beispiel
ansehen …
var elem = document.getElementById("Eingabe");
var ausgabe = document.getElementById("Ausgabe");
elem.addEventListener("mouseenter", mouseEnter);
elem.addEventListener("mouseleave", mouseLeave);
function mouseEnter() {
ausgabe.innerHTML = 'Ich bin dynamisch!';
ausgabe.style.color = "red";
elem.innerHTML = 'Enter!<br>(Drüber)';
}
function mouseLeave() {
ausgabe.innerHTML = 'Wieder weg!';
ausgabe.style.color = "black";
elem.innerHTML = 'Leave!<br>(wieder weg!)';
}
Der Button erhält durch addEventListener die Event-Handler mouseenter und mouseleave zugewiesen. Der Event-Handler mouseenter tritt in Aktion, wenn der Anwender die Maus über den Button bewegt, und mouseleave wird aktiv, wenn er die Maus wieder herausbewegt.
Mittels der Eigenschaft innerHTML können Sie mit jedem Aktivwerden eines der beiden Event-Handler den Text des Buttons dynamisch austauschen.
Beachten Sie: Anders als bei mouseover steigt dieser Event-Handler nicht auf (Event-Bubbling).[1]
Beachten Sie: Der mouseenter-Event-Handler wird von Safari nicht unterstützt. Benutzen Sie in diesem Fall mouseover.
Beachten Sie: Der mouseenter-Event-Handler wird nicht durch drag und drop ausgelöst. Benutzen Sie in diesem Fall dragenter.
Empfehlung:
Empfehlung: einen ähnlichen Effekt können Sie ganz ohne JavaScript mit :hover erreichen.
Siehe auch
Weblinks
- MDN: mouseenter Event
Events (Übersicht)
- Animations-Events
- Datenabruf-Events
- Drag & Drop-Events
- Formular-Events
- Maus, Touch und Pointer-Events
- Medien-Events
- Print-Events
- Tastatur-Events
- Window-Events
- Zwischenablage-Events
