JavaScript/DOM/Event/mouseover
Aus SELFHTML-Wiki
< JavaScript | DOM | Event
Der mouseover-Event-Handler wird beim Überfahren des Elements mit der Maus ausgelöst.
| bubbles |
ja |
|---|---|
| cancelable |
ja |
| 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('mouseover', mouseOver);
elem.addEventListener('mouseout', mouseOut);
function mouseOver() {
ausgabe.innerHTML = 'Ich bin dynamisch!';
elem.innerHTML = 'Drüber!';
}
function mouseOut() {
ausgabe.innerHTML = ' ';
elem.innerHTML = 'Wieder weg!';
}
Der Button erhält durch addEventListener den Event-Handler mouseover zugewiesen. Der Event-Handler mouseover tritt in Aktion, wenn der Anwender die Maus über den Button bewegt, und mouseout 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.
Siehe auch
Weblinks
- MDN: mouseover 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
