Event Listener

Der Event Listener ist eine Funktion aus der Programmierung (JavaScript).

Der Event Listener ist eine Reaktion auf eine Ereignisquelle (z.B. Tastatur, Maus).

---

Bei mehreren Eventlistenern werden alle ausgeführt.

---

Ein Event Listener greift mit this auf das globale Objekt zu (window Objekt im Browser) oder auf die Umgebung, in welcher der Eventlistern liegt. Man kann mit bind(this) den Kontext ändern.

---

1. Beispiel mouseover:

Wenn man mit der Maus über den Text geht:

HIER MIT DER MAUS DRÜBER GEHEN: Demo für mouseover event.

Code:

<script>
<!--
function gruessen() {
alert("Hallo")
}
//-->
</script>
<p onmouseover = "gruessen()">Demo für mouseover event.</p>

---

2. Beispiel onmouseleave:

Das Gleiche, wenn man mit der Maus über dem Text war und wieder weggeht:

HIER MIT DER MAUS DRÜBER GEHEN: Demo für onmouseleave event.

Statt onmouseover schreibt man onmouseleave.

---

3. Beispiel ondblclick (EVENT-HANDLER):

Das Gleiche, wenn man mit der Maus doppelklickt:

HIER MIT DER MAUS DOPPELKLICKEN: Demo für ondblclick event.

Statt onmouseover schreibt man ondblclick.

---

4. Beispiel onmousedown (EVENT-HANDLER):

Das Gleiche, wenn man mit die Maus drückt:

HIER DIE MAUS DRÜCKEN: Demo für onmousedown event.

Statt onmouseover schreibt man onmousedown.

---

4. Beispiel onclick (EVENT-HANDLER):

Das Gleiche, wenn man mit die Maus klickt:

HIER DIE MAUS KLICKEN: Demo für onclick event.

Statt onmouseover schreibt man onclick.

---

5. Beispiel onmouseover und onmouseout:

Hallochen

<script>
//-->
function showInfo(){
document.getElementById("box").innerHTML = "Hallochen";
}
function deleteInfo(){
document.getElementById("box").innerHTML = "Tja";
}
function init(){
document.getElementById("touchButton").onmouseover = showInfo;
document.getElementById("touchButton").onmouseout = deleteInfo;
}
window.onload = init;
//-->
</script>
<button id="touchButton">Hallochen</button>
<div id="box">Geh mal mit der Maus über den Button</div>

---

zu meinen persönlichen Favoriten hinzufügen! 0