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 kannst du mit jedem Aktivwerden eines der beiden Event-Handler den Text des Buttons dynamisch austauschen.
Beachte: Anders als bei mouseover steigt dieser Event-Handler nicht auf (Event-Bubbling).[1]
Beachte: Der mouseenter-Event-Handler wird von Safari nicht unterstützt. Benutze in diesem Fall mouseover.
Beachte: Der mouseenter-Event-Handler wird nicht durch drag und drop ausgelöst. Benutze in diesem Fall dragenter.
Empfehlung:
Empfehlung: Einen ähnlichen Effekt kannst du 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
