JavaScript: Eventhandler

► JavaScript-Anleitung: DOM onevent handlers addEventListener() removeEventListener()

Eventhandler sind eine Komponente von JavaScript, über die es möglich ist, auf Ereignisse zu reagieren, die an den Objekten stattfinden, an die ein Eventhandler gebunden ist. Häufig – aber nicht ausschließlich – sind Eventhandler über ein entsprechendes Attribut an ein HTML-Element gebunden.

Aus der Vielzahl von existierenden Eventhandlern werden hier nur die wichtigsten beschrieben.

Es folgen vier Beispiele, wie ein Eventhandler an ein HTML-Element gebunden werden kann. Die ersten drei Beispiele folgen der Idee von Unobtrusive JavaScript, da das HTML-Element im Quelltext frei von JavaScript ist und der Eventhandler nur angebunden werden kann, wenn der Client JavaScript überhaupt unterstützt. Dieses Verfahren erhöht das Bewusstsein für die meist gegebene Notwendigkeit, die Benutzbarkeit eines Dokuments auch dann zu gewährleisten, wenn JavaScript beim Client deaktiviert ist oder nicht unterstützt wird.

In allen vier Fällen wird die Funktion updateButton() ausgeführt, sobald das Ereignis click an dem <button>-Element registriert wird.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Eventhandler</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <button id="mybutton1" type="button">Klick mich!</button>
    <button id="mybutton2" type="button">Klick mich!</button>
    <button id="mybutton3" type="button">Klick mich!</button>
    <button id="mybutton4" type="button" onclick="updateButton(4);">Klick mich!</button>

    <script>
      document.getElementById("mybutton1").setAttribute("onclick", "updateButton(1);");
      
      document.getElementById("mybutton2").onclick = function() {
        updateButton(2);
      };
      
      document.getElementById("mybutton3").addEventListener("click", function() {
        updateButton(3);
      });
      
      function updateButton(n) {
        document.getElementById("mybutton" + n).innerHTML = "Danke!";
      }
    </script>
  </body>
</html>

Lade-Events

► JavaScript-Referenz: onload onloadstart onloadend

Die Eventhandler onload, onloadstart und onloadend reagieren, wenn das Dokument oder eine enthaltene Ressource geladen wird. onloadstart reagiert sobald der Ladevorgang beginnt. onload reagiert während des Ladevorgangs und onloadend reagiert, wenn das Laden beendet ist.

Größenänderungs-Events

► JavaScript-Referenz: onresize

Der Eventhandler onresize reagiert, wenn die Größe eines Objekts verändert wird. Dies betrifft beispielsweise das <body>-Element, wenn das Browserfenster verkleinert oder vergrößert wird.

Scroll-Events

► JavaScript-Referenz: onscroll

Bei diesem Beispiel ändert sich die Hintergrundfarbe der Fläche dauerhaft, sobald sie gescrollt wird.

Maus-Events

► JavaScript-Referenz: onmouseenter onmouseleave onmouseover onmouseout
► JavaScript-Referenz: onmousedown onmouseup onmousemove onwheel

onmouseover, onmouseenter
Diese Eventhandler reagieren, sobald der Mauszeiger ein Element überfährt. onmouseover wird dabei von onmouseenter dominiert.

onmouseout, onmouseleave
Diese Eventhandler reagieren, sobald der Mauszeiger ein Element wieder verlässt. onmouseout wird dabei von onmouseleave dominiert.

onmousedown
Dieser Eventhandler reagiert, solange die Maustaste gedrückt wird.

onmouseup
Dieser Eventhandler reagiert, wenn die Maustaste wieder losgelassen wird.

onmousemove
Dieser Eventhandler reagiert, wenn der Mauszeiger bewegt wird.

Pointer-Events

► JavaScript-Referenz: onpointerenter onpointerleave onpointerover onpointerout
► JavaScript-Referenz: onpointerdown onpointerup onpointermove onpointercancel

Pointer-Events entsprechen weitgehend den Maus-Events, können aber auch von anderen Zeigergeräten ausgelöst werden.

Klick-Events

► JavaScript-Referenz: onclick ondblclick

In diesem Beispiel wird der Text des Buttons geändert, wenn er angeklickt wird. Ein Doppelklick setzt ihn wieder zurück.

Tasten-Events

► JavaScript-Referenz: onkeydown onkeyup

Diese Eventhandler können auf fokussierbare Elemente angewendet werden. Im Beispiel wird die gedrückte Taste angezeigt, wenn im Eingabefeld getippt wird.

Formular-Events

► JavaScript-Referenz: onfocus onblur oninput onchange onselect oninvalid onreset onsubmit

(s. auch Verarbeitung von Formular-Elementen)

onfocus, onblur
Wird ein Eingabefeld fokussiert, ändert es seine Hintergrundfarbe. Wird es wieder verlassen, wird die Hintergrundfarbe wieder zurückgesetzt.

onreset, onsubmit
Wird das Formular zurückgesetzt oder abgeschickt, erscheint eine Mitteilung.

<textarea>, <input type="text"> und <input list="">:

  • oninput reagiert bei jeder Änderung der Eingabe.
  • onchange reagiert beim Verlassen des Eingabefeldes. Bei <input list=""> auch bei erfolgter Auswahl.
  • onselect reagiert bei der Selektion eines Teils der Eingabe.

<select>, <input type="checkbox"> und <input type="radio">:

  • oninput und onchange reagieren bei erfolgter Auswahl.

<input type="range"> und <input type="number">:

  • oninput reagiert, wenn der Regler bewegt wird.
  • onchange reagiert, wenn der Regler losgelassen wird.

oninput
onchange
onselect
oninput
onchange
onselect
oninput
onchange
onselect
oninput
onchange
oninput
onchange
oninput
onchange
oninput
onchange
oninput
onchange