Ereignisse in JavaScript und interaktive Seiten

Eine Seite kann auf eine Aktion einer Person warten. Ein Ereignis meldet, dass etwas geschehen ist, und ein Event-Listener ist die Funktion, die als Reaktion aufgerufen wird. Die Registrierung eines Listeners richtet diese Reaktion ein; sie führt die Aktion nicht sofort aus.

Füge die Funktion dem Element hinzu

Wähle ein bereits existierendes Element und den exakten Namen des Ereignisses und übergib eine Funktion:

const button = document.querySelector("#like");
let likes = 0;
button.addEventListener("click", function () {
  likes = likes + 1;
  button.textContent = "Likes: " + likes;
});

Die Auswahl, die Einrichtung der Variablen und die Registrierung laufen, wenn das Skript ausgeführt wird. Jeder spätere Klick führt den Funktionsrumpf aus. Nach drei Klicks zeigt die Schaltfläche „Likes: 3“. Liegt likes außerhalb der Funktion, bleibt die Summe zwischen den Klicks erhalten; mit let likes = 0 innerhalb der Funktion würde sie jedes Mal neu beginnen.

Übergib eine Funktionsreferenz wie showMenu ohne Klammern. In button.addEventListener("click", showMenu()) ruft JavaScript showMenu sofort auf und übergibt den Rückgabewert als Listener. Um später ein Argument zu übergeben, verpacke den Aufruf: button.addEventListener("click", () => showMenu("main"));.

Wähle ein Ereignis, das tatsächlich auftritt

Namen sind Zeichenketten ohne das Präfix „on“, bei denen Groß- und Kleinschreibung beachtet werden. Nutze "click", nicht "Click" oder "onclick". Ein erfundener Name wird ohne Fehler akzeptiert, aber der Browser löst ihn bei einem Klick nicht aus. Zu den häufigen Familien gehören Zeigerereignisse wie pointerdown und pointerup, Tastaturereignisse wie keydown, Formularereignisse wie input und submit sowie Fokusereignisse wie focusin. Bei DOMContentLoaded muss ebenfalls die genaue Groß- und Kleinschreibung beachtet werden.

Richte das richtige Element zum richtigen Zeitpunkt ein

Ein Skript im Head kann ausgeführt werden, bevor eine Schaltfläche existiert. Die Auswahl gibt dann null zurück, und der Aufruf von addEventListener darauf löst einen Fehler aus. Lade ein externes Skript mit defer, setze es hinter das Markup oder registriere die Einrichtung für das Ereignis DOMContentLoaded des Dokuments. Ein später erstelltes Element benötigt nach seiner Erstellung eine Einrichtung oder einen Listener an einem Vorfahrenelement.

querySelectorAll gibt eine NodeList zurück, nicht ein einzelnes Ereignisziel. Registriere Listener an ihren Elementen:

document.querySelectorAll(".tab").forEach((tab) => {
  tab.addEventListener("click", selectTab);
});

Lass Listener nebeneinander bestehen

Listener mit derselben Capture-Einstellung laufen in der Reihenfolge ihrer Registrierung. Am Ereignisziel laufen Capture-Listener vor Listenern ohne Capture. Wird dasselbe Funktionsobjekt mit demselben Typ und derselben Capture-Einstellung erneut hinzugefügt, entsteht keine zweite Kopie.

Der Browser übergibt deinem Listener ein Ereignisobjekt. Seine Eigenschaften beschreiben das Ereignis, das diesen konkreten Aufruf ausgelöst hat. Nenne den Parameter event oder e; der Parametername ist deine Wahl.

button.addEventListener("click", (event) => {
  console.log(event.type);
  console.log(event.currentTarget);
});

Dies gibt während des Listener-Aufrufs "click" und die Schaltfläche aus. Die Ausgabe des ganzen Objekts kann dir helfen, seine anderen Eigenschaften zu entdecken.

Unterscheide den Ursprung vom Listener

Stell dir eine Schaltfläche vor, die ein Bild enthält:

<button id="save" data-id="7">
  <img src="disk.svg" alt=""> Save
</button>

Ein Klick auf den Text „Save“ macht ebenfalls die Schaltfläche zum Ziel. Der Text ist Teil der Schaltfläche; er wird nicht zu einem eigenen Zielelement.

Dieser Unterschied ist beim Auslesen von Daten wichtig. Das Bild hat nicht das data-id der Schaltfläche, daher ist event.target.dataset.id bei einem Klick auf das Bild undefined. Ein direkt an der Schaltfläche registrierter Listener kann event.currentTarget.dataset.id lesen. Ein Listener an einem größeren Container kann die gewünschte Schaltfläche mit event.target.closest("button") finden und prüfen, ob ein Treffer vorliegt.

Lies die Details dieses Ereignisses

Jedes Ereignis hat einen type, ein target und ein currentTarget. Der boolesche Wert bubbles gibt an, ob es durch die Vorfahren aufwärts weitergegeben wird. cancelable gibt an, ob Code seine Standardaktion verhindern kann, und defaultPrevented hält fest, ob dies geschehen ist. timeStamp hält den Erstellungszeitpunkt des Ereignisses in Millisekunden relativ zum Zeitursprung der Seite fest.

Verschiedene Ereignisfamilien ergänzen nützliche Details. Ein modernes click liefert ein PointerEvent, das Mausereignis-Eigenschaften wie clientX, clientY und button erbt. Ein KeyboardEvent ergänzt key, code und Modifikatortasten-Flags. Ein input-Listener kann mit event.target.value den neuen Text des Feldes lesen.

Bei einem Galerie-Listener kann event.target.tagName "IMG" sein, wenn ein Foto angeklickt wird, oder "DIV", wenn der Zwischenraum angeklickt wird. Behandle den tatsächlich gemeldeten Fall. Geh nicht davon aus, dass jedes Ereignis innerhalb eines Containers von derselben Art von Kindelement stammt.

Nutze den Wert während der Listener läuft

In einem Listener als reguläre Funktion ist this gleich event.currentTarget. Eine Pfeilfunktion übernimmt this aus ihrem umgebenden Code; sie erhält das Element nicht als this. event.currentTarget funktioniert bei beiden Funktionsarten.

Nach der Ereignisauslösung wird currentTarget auf null zurückgesetzt. Eine Konsole kann diesen späteren Wert anzeigen, wenn du ein zuvor ausgegebenes Ereignis aufklappst. Gib event.currentTarget direkt im Listener aus, um das Element während des Aufrufs zu untersuchen.

Ein Listener sollte so lange aktiv bleiben, wie seine Funktion ihn benötigt. Bewahre bei einer zeitlich begrenzten Tastaturinteraktion die Funktionsreferenz auf, damit der Listener beim Schließen der Interaktion entfernt werden kann.

Entferne dieselbe Funktion

function onKey(event) {
  console.log(event.key);
}
document.addEventListener("keydown", onKey);
// When the feature closes:
document.removeEventListener("keydown", onKey);

Beim Entfernen müssen Ereignistyp, Funktionsobjekt und Capture-Einstellung übereinstimmen. Auch eine anonyme Funktion lässt sich entfernen, wenn ihre Referenz gespeichert wird, wie in const handler = () => save();. Ein neu geschriebenes () => save() im Aufruf zum Entfernen erzeugt eine andere Funktion, auch wenn der Code identisch aussieht.

Wähle die Registrierungsoptionen

Ein einmalig angezeigtes Willkommensbanner kann { once: true } nutzen. Eine Funktion mit mehreren Listenern kann ihnen ein gemeinsames Signal geben:

const controller = new AbortController();
window.addEventListener("pointermove", moveCursor, {
  signal: controller.signal
});
window.addEventListener("keydown", onKey, {
  signal: controller.signal
});
// Close the feature:
controller.abort();

Der Abbruch entfernt beide Registrierungen. Ein abgebrochener Controller kann nicht zurückgesetzt werden; erstelle für eine neue Lebensdauer einen neuen Controller. Übergib beim Entfernen mit removeEventListener erneut capture: true, wenn es bei der Registrierung verwendet wurde. once, signal und passive gehören nicht zu den Kriterien für das Entfernen.

Der Aufruf von preventDefault() in einem passiven Listener wird ignoriert. Browser machen bestimmte Listener im Zusammenhang mit dem Scrollen an Zielen auf Dokumentebene häufig standardmäßig passiv, darunter Listener für wheel, touchstart und touchmove; nutze dort ausdrücklich { passive: false }, wenn das Verhindern der Standardaktion nötig ist.

Vermeide die Ansammlung von Callbacks

Wenn jeder Klick auf „Start“ einen neuen anonymen Listener am Spielfeld hinzufügt, führt nach zweimaligem Starten ein Klick auf das Spielfeld zwei Callbacks aus. Registriere den Listener am Spielfeld einmal, verwende dasselbe Funktionsobjekt erneut oder brich die vorherige Gruppe ab, bevor du sie ersetzt. Unterschiedliche once-Callbacks können sich dennoch ansammeln, bevor sie ausgelöst werden.

Das Entfernen eines Elements aus der Seite erhält seine Listener. Sie funktionieren, wenn es wieder eingefügt wird, und dispatchEvent() kann sie erreichen, während es losgelöst ist. Das Element kann von der Speicherbereinigung entfernt werden, wenn es und seine Listener nicht mehr erreichbar sind. Ein Listener an window oder document bleibt registriert, bis er ausdrücklich entfernt wird.

Sende ein benutzerdefiniertes Ereignis

const event = new CustomEvent("cart:add", {
  detail: { id: 42 },
  bubbles: true
});
item.dispatchEvent(event);

Listener lesen event.detail.id. Die Ereignisauslösung ruft die Listener sofort auf, bevor sie zurückkehrt. bubbles: true lässt auch Vorfahrenelemente das Ereignis empfangen. Ein mit dispatchEvent() gesendetes Ereignis hat für isTrusted den Wert false; vom Browser ausgelöste Ereignisse können als vertrauenswürdig gelten, selbst wenn eine API wie focus() sie verursacht hat.

Ein Klick innerhalb einer Schaltfläche kann auch von ihren Vorfahrenelementen empfangen werden. Ereignisweitergabe ist der Weg des Ereignisses durch den Dokumentbaum. Dieser Weg erklärt sowohl nützliche gemeinsame Listener als auch überraschende zusätzliche Aktionen.

Verfolge drei Phasen

1. Capturing: Das Ereignis bewegt sich von window durch die Vorfahren abwärts zum Ziel.
2. Ziel: Listener werden an dem Element ausgeführt, an dem das Ereignis begann.
3. Bubbling: Ein Ereignis mit Bubbling bewegt sich durch die Vorfahren zurück aufwärts bis zu window.

Die Eigenschaft eventPhase meldet 1 für Capturing, 2 am Ziel und 3 für Bubbling. Ein ohne Optionen registrierter Listener läuft am Ziel oder auf dem Weg der Bubbling-Phase. Ein Listener mit { capture: true } läuft auf dem Weg abwärts, auch am Ziel, wenn er dort registriert ist.

Verfolge einen konkreten Klick

<div id="outer">
  <div id="inner">
    <button>Go</button>
  </div>
</div>

Angenommen, die Schaltfläche und jedes div-Element haben gewöhnliche Klick-Listener, die ihre Namen ausgeben. Ein Klick auf „Go“ gibt „button“, „inner“ und dann „outer“ aus. Ein Klick auf einen leeren Bereich von inner gibt „inner“ und dann „outer“ aus; die Schaltfläche liegt nicht auf dem Pfad dieses Ereignisses.

Füge nun outer einen Capture-Listener hinzu. Ein Klick auf die Schaltfläche gibt zuerst „outer (capture)“ und danach durch die gewöhnlichen Listener „button“, „inner“ und „outer“ aus. Der Capture-Listener erhält den Klick vor den Nachfahren. Nach outer kann das Ereignis durch body, html, document und window weiterlaufen, wenn dort Listener registriert sind.

Es ist ein Ereignis, kein neuer Klick, der an jedem Vorfahrenelement entsteht. target bleibt währenddessen die Schaltfläche. currentTarget ändert sich, während die einzelnen Listener laufen. Auch im äußeren Listener bezeichnet target weiterhin die ursprüngliche Schaltfläche.

Prüfe, welche Ereignisse die Bubbling-Phase durchlaufen

Die Eigenschaft bubbles des Ereignisses zeigt, ob es eine Bubbling-Phase hat. Ereignisse ohne Bubbling können dennoch von einem Capture-Listener an einem Vorfahrenelement beobachtet werden. Um Fokuswechsel über einen gewöhnlichen Container-Listener zu verarbeiten, wähle focusin oder focusout.

Erkläre einen Fehler bei verschachtelten Aktionen

Eine Produktkarte öffnet bei einem Klick eine Detailansicht. Ihre Schaltfläche „Entfernen“ löscht das Produkt. Ein Klick auf diese Schaltfläche löscht es zuerst, erreicht dann den Listener der Karte und öffnet die Detailansicht. Der Ereignispfad erklärt, warum beide Callbacks laufen.

Die Karte kann Klicks zum Entfernen mit if (event.target.closest(".remove")) return; ignorieren. Alternativ kann die Schaltfläche die Ereignisweitergabe stoppen. Das Filtern an der Karte erhält das Ereignis für andere Vorfahrenelemente, die es möglicherweise benötigen.

Ein Listener kann ändern, was nach einem Ereignis geschieht oder wohin das Ereignis weitergegeben wird. Das sind getrennte Entscheidungen. Das Ereignis eines Links kann die Bubbling-Phase weiter durchlaufen, auch nachdem die Navigation verhindert wurde.

Eine Browseraktion ersetzen

Eine Standardaktion ist ein Verhalten, das der Browser bereitstellt: einem Link folgen, ein Formular absenden, ein Kontrollkästchen umschalten, Text einfügen, mit der Leertaste scrollen oder den Fokus mit Tab verschieben. Nutze preventDefault(), wenn dein Code diese Aktion ersetzt:

help.addEventListener("click", (event) => {
  event.preventDefault();
  openHelpPanel();
});

Bei einem Link zu /help öffnet dies den Bereich, ohne dorthin zu navigieren. Der Link bietet sein Ziel weiterhin an, wenn JavaScript nicht ausgeführt wird.

Nur bei abbrechbaren Ereignissen lässt sich die Standardaktion verhindern. Prüfe event.cancelable; defaultPrevented hält fest, ob die Aktion erfolgreich verhindert wurde. input tritt auf, nachdem sich der Wert geändert hat, und ist nicht abbrechbar. Ein Aufruf von preventDefault() entfernt dort den eingefügten Text nicht. Ein abbrechbares beforeinput-Ereignis ist die passende Stelle, um eine Bearbeitung abzufangen; das Verhindern eines entsprechenden keydown kann die Standardwirkung dieser Taste verhindern.

Die Ereignisweitergabe getrennt steuern

Ein Link, dessen Listener nur die Ereignisweitergabe stoppt, folgt weiterhin seiner URL. Wird nur die Navigation verhindert, kann ein Klick-Listener am Dokument das Ereignis weiterhin empfangen. Die Rückgabe von false aus einem addEventListener-Callback bewirkt keines von beidem. Eine Event-Handler-Eigenschaft oder ein Inline-Handler kann durch die Rückgabe von false seine Standardaktion verhindern, stoppt damit aber ebenfalls nicht die Ereignisweitergabe.

Gemeinsames Verhalten funktionsfähig halten

Ein Vorfahrenelement kann ein Menü schließen oder Interaktionen zählen. Das Stoppen der Ereignisweitergabe verbirgt das Ereignis vor diesem Code. Oft kann das Vorfahrenelement stattdessen target oder defaultPrevented prüfen.

Zum Beispiel schließt sich ein Menü nur, wenn ein Klick außerhalb sowohl des Menüs als auch des auslösenden Bedienelements liegt:

document.addEventListener("click", (event) => {
  if (!menu.contains(event.target) &&
      !menuButton.contains(event.target)) {
    menu.hidden = true;
  }
});

contains() schließt das Element selbst und seine Nachfahren ein. Die Prüfung des auslösenden Bedienelements ist wichtig, weil auch der Klick zum Öffnen durch Bubbling zum Dokument gelangt. Ohne diese zweite Prüfung würde das gerade geöffnete Menü sofort wieder geschlossen.

Nur eine selbst behandelte Aktion verhindern

Prüfe in einem Tastatur-Listener die Taste, bevor du ihre Standardaktion verhinderst. Das Verhindern jeder Taste blockiert die normale Texteingabe und kann verhindern, dass Tab den Fokus verschiebt. In einem passiven Listener wird das Verhindern der Standardaktion vollständig ignoriert.

Bei der Ereignisdelegation wird ein Listener an einem beständigen Vorfahrenelement registriert und anhand des Ereignisursprungs eine Aktion gewählt. Das ist nützlich, wenn eine Liste viele Einträge hat oder Code nach der Einrichtung neue Einträge erstellt.

Das gewünschte Bedienelement finden

Ein Klick, der die Bubbling-Phase durchläuft, erreicht die Liste unabhängig davon, welcher ihrer Nachfahren angeklickt wurde. Beginne bei event.target, finde das nächste passende Bedienelement und schließe nicht zugehörige Klicks aus:

const list = document.querySelector("#todos");
list.addEventListener("click", (event) => {
  const button = event.target.closest(".remove");
  if (!button || !list.contains(button)) return;
  const item = button.closest("li");
  console.log("Removing item " + item.dataset.id);
  item.remove();
});

Die Liste enthält Einträge wie <li data-id="7">Buy milk <button class="remove">Remove</button></li>. Der Listener gehört zur Liste, sodass ein neuer Eintrag mit demselben Markup unmittelbar nach dem Einfügen funktioniert.

Verfolge einen Klick auf ein Symbol durch den Code. Das Ziel ist das Symbol, closest(".remove") findet seine Schaltfläche, und button.closest("li") findet den Eintrag. Dessen data-id bezeichnet den Eintrag in der Meldung. Schließlich ändert remove() die Seite.

Beide Prüfungen beibehalten

Wer nur event.target.matches(".remove") prüft, übersieht Klicks auf Symbole, weil das Symbol selbst nicht zum Selektor passt. closest() prüft das Ziel und geht dessen Vorfahren aufwärts. In einem delegierten Listener ist currentTarget die Liste; es wird nicht zur gefundenen Schaltfläche.

Mehrere Aktionen zuordnen

Mit Datenattributen kann ein Listener an einer Werkzeugleiste zwischen bekannten Aktionen wählen:

const actions = { bold: makeBold, italic: makeItalic,
  clear: clearText };
toolbar.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button || !toolbar.contains(button)) return;
  const action = actions[button.dataset.action];
  if (typeof action === "function") action();
});

Eine Schaltfläche mit data-action="clear" wählt clearText aus. Die Funktionsprüfung behandelt eine unbekannte Aktion, ohne zu versuchen, undefined aufzurufen.

Ein geeignetes Ereignis wählen

Delegation funktioniert auch mit anderen Ereignissen mit Bubbling, nicht nur mit Klicks. Ein einzelner input-Listener am Formular kann event.target an eine Funktion zur Feldprüfung übergeben. Nutze focusin oder focusout, um Fokuswechsel zu delegieren; gewöhnliche focus- und blur-Ereignisse durchlaufen die Bubbling-Phase nicht. Nutze für Hover-Übergänge over/out-Ereignisse mit Bubbling, wenn Delegation erforderlich ist.

Ein stopPropagation() an einem Nachfahrenelement kann verhindern, dass ein Ereignis den Container erreicht. Wenn ein delegierter Listener nicht aktiv zu sein scheint, prüfe den Ereignistyp, das Ziel, ob der Selektor passt und ob etwas unterhalb des Containers die Weitergabe gestoppt hat.

Tastatureingaben gehen an das fokussierte Element, das als document.activeElement verfügbar ist, und durchlaufen anschließend die Bubbling-Phase. Ein Dokument-Listener kann daher Tastenereignisse aus Feldern und anderen Bedienelementen empfangen. Diese Reichweite macht Tastenkombinationen nützlich, bedeutet aber auch, dass sie beim Tippen stören können.

Die Eigenschaft nach ihrer Bedeutung wählen

Auf einer AZERTY-Tastatur erzeugt die Position, die auf einer US-Tastatur mit Q beschriftet ist, key "a" und code "KeyQ". Nutze key für die Bedeutung, etwa Escape zum Schließen oder einen Buchstaben als Kurzbefehl. Nutze code für feste Positionen, etwa Bewegungstasten in einem Spiel. Der key der Leertaste ist ein einzelnes Leerzeichen, nicht "Space".

keydown wird beim ersten Drücken ausgelöst und kann wiederholt werden, solange die Taste gedrückt bleibt. Bei wiederholten Aufrufen gilt event.repeat === true. keyup wird beim Loslassen ausgelöst. Nutze keydown statt des veralteten Ereignisses keypress.

Einen Kurzbefehl gezielt behandeln

document.addEventListener("keydown", (event) => {
  if ((event.ctrlKey || event.metaKey) &&
      event.key.toLowerCase() === "s") {
    event.preventDefault();
    saveDraft();
  }
});

Dies behandelt Strg+S und Command+S. Die Umwandlung in Kleinbuchstaben erlaubt auch "S". Das Verhindern der Standardaktion ersetzt die Aktion „Seite speichern“ des Browsers nur bei der passenden Tastenkombination. Weitere Modifikatortasten-Flags sind shiftKey und altKey.

Überspringe bei einem seitenweiten Kurzbefehl mit einem einzelnen Buchstaben Eingabekontexte, bevor du die Aktion ausführst:

if (event.target.matches("input, textarea, select") ||
    event.target.isContentEditable) return;
if (event.repeat) return;

Die erste Prüfung schützt die Texteingabe. Die zweite sorgt dafür, dass eine Aktion pro physischem Tastendruck einmal läuft. Verhindere Tab nicht auf der ganzen Seite; damit navigieren Tastaturnutzer weiter.

Text nach seiner Änderung auslesen

Bei einer gewöhnlichen druckbaren Taste ist die Reihenfolge keydown, beforeinput, input und dann keyup. Das Lesen von value bei keydown liefert den Wert, bevor dieses Zeichen eingefügt wurde. Nutze input für eine Textvorschau oder einen Zeichenzähler. Es erfasst auch Bearbeitungen wie Einfügen und Diktieren, die keinen entsprechenden Tastendruck benötigen.

Fokuswechsel beobachten

focus und blur melden das Erhalten und Verlieren des Fokus, ohne die Bubbling-Phase zu durchlaufen. focusin und focusout durchlaufen sie, sodass ein Formular seine Felder mit einem Listener beobachten kann. relatedTarget bezeichnet das andere am Wechsel beteiligte Element oder null, wenn es keines gibt.

password.addEventListener("focus", () => {
  hint.hidden = false;
});
password.addEventListener("blur", () => {
  hint.hidden = true;
});

Der Hinweis ist verfügbar, wenn das Feld den Fokus erhält, auch über Tab. Der Aufruf von element.focus() verschiebt den Fokus per Code; die nächste Tastatureingabe geht dann an dieses Element.

Eine Person kann eine Maus, einen Finger, einen Stift oder eine Tastatur nutzen. Wähle das Ereignis passend zur benötigten Interaktion. click steht für eine Aktivierung; Zeigerereignisse beschreiben Drücken, Bewegen und Loslassen.

Aktionen über die Tastatur zugänglich halten

Eine native Schaltfläche löst click aus, wenn sie mit Enter oder der Leertaste aktiviert wird. Ein fokussierter Link tut dies bei Enter. Wird eine Aktion nur an pointerdown oder mousedown gebunden, werden diese Tastaturaktivierungen nicht erfasst. Nutze click für Aktionen wie das Öffnen eines Bereichs; nutze pointerdown, wenn eine Aktion beim Drücken beginnen muss, etwa beim Ziehen.

Ein Zeigerklick folgt auf ein Drücken und Loslassen. Geschehen diese auf unterschiedlichen Elementen, kann der Klick deren nächstes gemeinsames Vorfahrenelement zum Ziel haben. dblclick folgt auf zwei schnelle Klicks; event.detail zählt schnelle aufeinanderfolgende Klicks. auxclick behandelt Klicks mit einer anderen als der primären Taste. contextmenu kann durch einen sekundären Klick, langes Berühren oder einen Menübefehl der Tastatur ausgelöst werden.

Eine Zeigerereignisfamilie nutzen

pointerdown, pointermove, pointerup und pointercancel decken Maus, Berührung und Stift ab. pointerType bezeichnet das Gerät als "mouse", "touch" oder "pen"; pointerId unterscheidet aktive Zeiger, auch zwei Finger.

Ältere Maus- und Berührungsereignisfamilien existieren weiterhin. Browser können nach Zeigerereignissen Mausereignisse zur Kompatibilität auslösen. Die Registrierung von pointerdown und mousedown für dieselbe Aktion kann sie daher zweimal ausführen.

Koordinaten passend zur Aufgabe wählen

Ist das Dokument um 300 px nach unten gescrollt und liegt ein Klick 100 px unterhalb des oberen Viewportrands, ist clientY 100 und pageY 400. Verwende beim Berechnen einer Bewegung beide Positionen im selben Koordinatensystem. Wechselt das verschachtelte Ziel, kann sich auch der Ursprung der Offset-Koordinaten ändern.

button meldet, welche Taste bei einem Down- oder Up-Ereignis ihren Zustand geändert hat: 0 primär, 1 Mitte, 2 sekundär. buttons meldet die aktuell gedrückte Kombination: Die primäre Taste trägt 1 bei, die sekundäre 2 und die mittlere 4. Somit bedeutet buttons === 3, dass die primäre und die sekundäre Taste gedrückt sind; es bedeutet nicht, dass die mittlere Taste ihren Zustand geändert hat.

Hover-Verhalten für ein ganzes Bedienelement wählen

Over/out-Ereignisse durchlaufen die Bubbling-Phase und können ausgelöst werden, wenn der Zeiger die Grenze eines Kindelements überquert. Enter/leave-Ereignisse durchlaufen die Bubbling-Phase nicht und beschreiben das Betreten oder Verlassen des gesamten Elements einschließlich seiner Kindelemente. Ein Hinweisfeld kann mit pointerenter und pointerleave das Flackern an den Grenzen von Kindelementen vermeiden.

Nutzer von Touchscreens und Tastaturen führen keinen Hover aus. Biete wesentliche Informationen auch bei Klick oder Fokus an. Für einen visuellen Hover-Effekt ohne zusätzliches Verhalten ist CSS :hover einfacher als ein Listener.

Eine Ziehinteraktion muss Informationen über mehrere Ereignisse hinweg speichern. Speichere die Startkoordinaten des Zeigers und die Startposition des Elements. Jede Bewegung wendet dann die Differenz zu diesem Startpunkt an, sodass das Element nicht springt, um seine Ecke unter den Zeiger zu setzen.

Die Verschiebung berechnen

Eine Box beginnt bei left: 100px; top: 50px. Der Zeiger beginnt bei den Viewport-Koordinaten 220, 140 und bewegt sich zu 260, 125. Die horizontale Änderung beträgt 40 px; die vertikale Änderung beträgt −15 px. Addierst du diese Änderungen zur Startposition der Box, erhältst du left: 140px; top: 35px.

Nutze für beide Zeigerpositionen einheitlich Client-Koordinaten. Allgemein berechnest du die Startposition des Elements plus die Verschiebung des Zeigers. Addiere nicht jede vollständige Verschiebung zur bereits aktualisierten Position der Box, denn dadurch würdest du frühere Bewegungen erneut zählen.

Einen Zeiger speichern und erfassen

Für eine absolut positionierte Box ohne Außenabstand innerhalb eines relativ positionierten Containers:

let start = null;
box.addEventListener("pointerdown", (event) => {
  if (start || event.button !== 0) return;
  start = { id: event.pointerId, x: event.clientX,
    y: event.clientY, left: box.offsetLeft,
    top: box.offsetTop };
  box.setPointerCapture(event.pointerId);
});
box.addEventListener("pointermove", (event) => {
  if (!start || event.pointerId !== start.id) return;
  box.style.left = start.left +
    (event.clientX - start.x) + "px";
  box.style.top = start.top +
    (event.clientY - start.y) + "px";
});
function endDrag(event) {
  if (start && event.pointerId === start.id) start = null;
}
box.addEventListener("pointerup", endDrag);
box.addEventListener("pointercancel", endDrag);

Die gespeicherte ID weist Bewegungen und das Loslassen eines zweiten Zeigers zurück. offsetLeft und offsetTop liefern Startpositionen als Zahlen; Stile benötigen den Zusatz "px".

Die Zeigererfassung sorgt dafür, dass nachfolgende Ereignisse dieses Zeigers weiterhin an die Box gerichtet werden, selbst wenn er sich außerhalb der Box bewegt. Der Browser beendet die Erfassung nach dem Loslassen oder Abbrechen des Zeigers. releasePointerCapture(id) kann sie früher beenden.

Die Übernahme durch den Browser behandeln

Eine Berührungsgeste kann zum Scrollen oder Zoomen der Seite werden und dadurch pointercancel auslösen. Beende die Ziehinteraktion dort ebenso wie bei pointerup; andernfalls kann ein veralteter Zustand die Box später weiterbewegen. Setze touch-action: none vor der Interaktion auf die Ziehfläche, um die Geste dafür zu reservieren. Beschränke die Regel auf diese Fläche, damit der Rest der Seite scrollen kann.

Nutze user-select: none auf der Ziehfläche, um das Markieren von Text zu vermeiden. Setze draggable="false" auf ihre Bilder, um das native Ziehen von Bildern zu verhindern.

Eine andere Möglichkeit zum Bewegen anbieten

Biete für ein fokussiertes Bedienelement das Bewegen per Tastatur sowie anklickbare oder antippbare Schaltflächen zum Bewegen an. Pfeiltasten allein bieten keine Einzelzeiger-Alternative zum Ziehen. Das WCAG-2.2-Erfolgskriterium 2.5.7 verlangt eine solche Alternative, außer wenn das Ziehen wesentlich oder unverändertes Browserverhalten ist. Native Schaltflächen zum Bewegen können sowohl Tastatur- als auch Zeigernutzern dienen.

Die separate HTML Drag and Drop API nutzt dragstart, dragover und drop, um Daten wie Dateien zu übertragen. Ihre Ereignisfolge unterscheidet sich von dieser zeigerbasierten Positionsänderung.

Formularfelder stellen unterschiedliche Arten von Zuständen bereit. Der value eines Textfeldes ist eine Zeichenkette; checked eines Kontrollkästchens ist ein boolescher Wert. Das Lesen der richtigen Eigenschaft ist der erste Schritt zu zuverlässigen Berechnungen und Vorschauen.

Zahlen gezielt umwandeln

Selbst <input type="number"> hat einen value als Zeichenkette. Bei dem Text "3" ergibt das Addieren von 1 "31". Number(input.value) + 1 ergibt 4. Ein Zahlenfeld stellt außerdem valueAsNumber bereit.

Eine leere Eingabe erfordert eine eigene Entscheidung. Number("") ergibt 0, wodurch eine fehlende Mengenangabe wie eine tatsächliche Null aussehen kann. Prüfe zuerst input.value === "" oder nutze valueAsNumber, das bei einem leeren Zahlenfeld NaN ergibt. Prüfe dieses Ergebnis mit Number.isNaN().

Den ausgewählten Zustand auslesen

Der value eines Kontrollkästchens ist sein festgelegter Text für die Übermittlung oder "on", wenn keiner angegeben ist. Er zeigt nicht an, ob es angekreuzt ist. Eine Auswahlliste meldet den Wert der gewählten Option. Um das ausgewählte Optionsfeld selbst zu finden, suche nach input[name="size"]:checked.

Das Ereignis passend zur Aktualisierung wählen

input meldet Änderungen durch den Nutzer unmittelbar, einschließlich Tippen und Einfügen. change meldet eine übernommene Auswahl: nachdem ein geändertes Textfeld den Fokus verliert oder sofort, wenn ein Kontrollkästchen, Optionsfeld oder eine Auswahlliste geändert wird.

message.addEventListener("input", () => {
  counter.textContent = 280 - message.value.length +
    " characters left";
});

Nach „Hello“ wurden fünf Zeichen verbraucht und der Zähler zeigt „275 characters left“. Ein keydown-Listener würde laufen, bevor das neue Zeichen in den Wert gelangt, und das Einfügen über ein Menü nicht erfassen. Eine Zuweisung an message.value per Code löst weder input noch change aus; rufe die Aktualisierungsfunktion zusätzlich direkt auf.

Die benannten Felder eines Formulars erfassen

form.elements.email.value greift über Name oder ID auf ein Bedienelement zu. Nutze form.elements["first-name"] für einen Namen mit Bindestrich. Beim Absenden werden Namen verwendet: Eine ID allein nimmt ein Feld nicht in die Daten auf.

const data = new FormData(form);
const email = data.get("email");
const topics = data.getAll("topics");

FormData erfasst die aktuellen geeigneten Name-Wert-Paare. Nicht angekreuzte Kontrollkästchen, deaktivierte Bedienelemente und Felder ohne Namen werden ausgelassen. get() gibt den ersten Wert für einen Namen zurück; getAll() erhält wiederholte Werte, etwa mehrere angekreuzte Themen. Dateifelder können Dateiobjekte liefern; gewöhnliche Textfelder liefern Zeichenketten.

Object.fromEntries(data) ist bei unterschiedlichen Namen praktisch, behält bei wiederholten Namen aber nur das letzte Paar. Wähle getAll(), wenn jede Auswahl wichtig ist. Da input die Bubbling-Phase durchläuft, kann ein Formular-Listener event.target lesen, um das jeweils geänderte Feld zu aktualisieren.

Das Absenden gehört zum Formular. Reagiere auf sein submit-Ereignis, um einen Klick auf eine Absende-Schaltfläche, Enter in einem einzeiligen Feld und ein per Skript aufgerufenes requestSubmit() auf einem Weg zu verarbeiten.

Navigation durch eine Seitenaktualisierung ersetzen

Normalerweise sendet ein Formular Daten an seine action-URL und lädt die Antwort. Ohne eine angegebene Aktion ist die aktuelle Seite das Ziel. Die Standardmethode GET fügt die Daten in die URL ein. Um die aktuelle Seite mit JavaScript zu aktualisieren, verhindere diese Standardaktion:

const form = document.querySelector("#new-todo");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const title = data.get("title").trim();
  if (title === "") return;
  addTodo(title);
  form.reset();
});

Dieses Formular hat ein aktiviertes Textfeld namens title. Der Listener entfernt umgebende Leerzeichen, ignoriert ein leeres Ergebnis, fügt einen Eintrag hinzu und setzt die Felder auf ihre Anfangswerte zurück. reset() bedeutet nicht immer, dass ein Feld leer wird; ein Bedienelement mit einem Anfangswert kehrt zu diesem Wert zurück.

Wenn der Eintrag kurz erscheint und beim Neuladen der Seite verschwindet, prüfe, ob preventDefault() fehlt. Ein Klick-Listener allein an der Schaltfläche ist nicht die richtige Stelle für die Formularverarbeitung, insbesondere wenn das Formular auf einem anderen Weg abgesendet wird.

Erkennen, was das Absenden auslöst

Implizites Absenden durch Enter kann auf die aktivierte standardmäßige Absende-Schaltfläche klicken. Enter in einem Textbereich fügt einen Zeilenumbruch ein. Eine Schaltfläche innerhalb eines Formulars ist standardmäßig eine Absende-Schaltfläche, wenn ihr Typ weggelassen wird. Eine Schaltfläche „Passwort anzeigen“ sollte daher ausdrücklich type="button" verwenden.

Bei mehreren Absende-Schaltflächen bezeichnet event.submitter die verwendete Schaltfläche. Bei Wegen ohne bestimmte Schaltfläche kann der Wert null sein, daher sollte der Code ihn vor dem Lesen prüfen:

const button = event.submitter;
const intent = button ? button.value : "save";
const data = button ? new FormData(form, button) :
  new FormData(form);

Eine benannte Absende-Schaltfläche wie name="intent" value="publish" steuert dieses Paar bei, wenn sie an FormData übergeben wird. Ein Aufruf von FormData(form) allein enthält das Name-Wert-Paar einer Absende-Schaltfläche nicht.

Den Validierungsweg beibehalten

Die integrierte Validierung läuft vor dem submit-Ereignis. Ist ein Pflichtfeld leer und fällt deshalb durch die Prüfung, meldet der Browser das Problem und löst submit nicht aus. Eine benutzerdefinierte Prüfung nur innerhalb dieses Listeners läuft bei diesem fehlgeschlagenen Versuch nicht. novalidate am Formular schaltet den automatischen Validierungsschritt ab.

Nutze requestSubmit(), wenn Code den normalen Weg über Validierung und submit-Ereignis benötigt. Es fordert das Absenden an, ohne einen Schaltflächenklick auszulösen. Übergib eine bestimmte Absende-Schaltfläche an requestSubmit(button), wenn deren Absendeeinstellungen gelten sollen.

HTML kann viele Eingaberegeln ohne eine benutzerdefinierte JavaScript-Prüfung beschreiben. Der Browser prüft diese Regeln beim Absenden und stellt die Ergebnisse für deinen Code bereit. Beginne mit den Regeln, die zu den benötigten Daten passen.

Eine Validierungsregel wählen

Bei pattern="[0-9]{5}" besteht „12345“; „1234“, „123456“ und „12345a“ fallen durch. Das Muster umfasst den ganzen Wert, nicht irgendeine passende Teilzeichenkette. Eine leere Eingabe überspringt die Musterprüfung, ergänze daher required, wenn das Auslassen nicht erlaubt ist.

Die E-Mail-Validierung prüft die Syntax, nicht ob ein Postfach existiert. Sowohl „ann@example.com“ als auch „ann@example“ bestehen die E-Mail-Regel des Browsers, während „ann.example.com“ sie nicht besteht. Ein zusätzliches Muster kann ein genaueres Format verlangen, wenn die Anwendung es benötigt.

Den Grund für das Fehlschlagen auslesen

Das validity-Objekt eines Feldes enthält boolesche Flags. valueMissing, typeMismatch, patternMismatch, tooShort und tooLong beschreiben fehlenden oder fehlerhaft geformten Text. rangeUnderflow, rangeOverflow und stepMismatch beschreiben numerische Einschränkungen. badInput deckt Eingaben ab, die der Browser nicht in einen brauchbaren Wert umwandeln kann, und customError hält eine benutzerdefinierte Validierungsmeldung fest. valid ist wahr, wenn keine Regel verletzt wird.

Bei einem Zahlenfeld mit min="0" max="10" step="2" liegt 12 über dem Maximum, 7 passt nicht zur erlaubten Schrittweite und 6 besteht die Prüfung. Mehr als ein Flag kann wahr sein; geh nicht davon aus, dass jedes ungültige Feld genau ein Problem hat.

Ohne Anzeige prüfen oder sichtbar melden

checkValidity() gibt einen booleschen Wert zurück und löst an ungültigen Bedienelementen invalid aus, ohne die Browsermeldung anzuzeigen. reportValidity() prüft ebenfalls und meldet das Problem zusätzlich dem Nutzer. Rufe eine der Methoden an einem Feld oder Formular auf. validationMessage liefert die Meldung in der Sprache des Browsers. Das Ereignis invalid durchläuft die Bubbling-Phase nicht.

Textlängenregeln gelten für vom Nutzer eingegebenen Text. Die Zuweisung input.value = "ab" im Code setzt tooShort nicht allein deshalb auf wahr, weil minlength 3 ist. maxlength verhindert normalerweise außerdem, dass der Nutzer über die festgelegte Länge hinaus weitere Zeichen eingibt.

Fehler zu einem hilfreichen Zeitpunkt anzeigen

:invalid gilt sofort, sodass ein unberührtes Pflichtfeld bereits dazu passt. :user-invalid wartet auf eine Nutzerinteraktion oder einen Absendeversuch und kann ein frühzeitig rot markiertes Feld vermeiden. Erkläre den Fehler neben der visuellen Gestaltung auch mit Text.

novalidate überspringt die automatische Validierung des Formulars beim Absenden; formnovalidate überspringt sie für eine Absende-Schaltfläche. Die Attribute entfernen weder Regeln noch deaktivieren sie checkValidity(). Browserprüfungen helfen Nutzern, Fehler zu korrigieren; der Server muss empfangene Daten erneut validieren, weil eine Anfrage die Seite umgehen kann.

Eine Regel, die zwei Felder betrifft, benötigt Code. Zum Beispiel muss eine Bestätigung mit einem Passwort übereinstimmen oder ein Enddatum nach einem Startdatum liegen. Trenne die Regel davon, wie und wann ihr Fehler angezeigt wird.

Einen benutzerdefinierten Fehler setzen und löschen

Eine nicht leere Zeichenkette, die an setCustomValidity() übergeben wird, markiert das Feld als ungültig und setzt customError. Die Übergabe von "" löscht diesen benutzerdefinierten Fehler; required, pattern oder andere Regeln können weiterhin verletzt sein.

function checkMatch() {
  const matches = confirm.value === password.value;
  confirm.setCustomValidity(matches ? "" :
    "The passwords do not match.");
}
password.addEventListener("input", checkMatch);
confirm.addEventListener("input", checkMatch);

Prüfe beide Abhängigkeiten erneut. Eine Änderung des ersten Passworts kann dazu führen, dass eine zuvor korrekte Bestätigung nicht mehr übereinstimmt. Eine Meldung, die nie gelöscht wird, hält das Feld ungültig, nachdem die Person die Abweichung korrigiert hat. Führe auch die anfängliche Prüfung aus, wenn Felder bereits mit Werten beginnen können.

Datumsfelder liefern ISO-Zeichenketten wie "2026-03-10", unabhängig vom angezeigten lokalen Datumsformat. Nicht leere Werte aus diesen Bedienelementen lassen sich als Text vergleichen. Wenn die Regel verlangt, dass das Ende nach dem Anfang liegt, lehne end.value <= start.value ab, einschließlich der Gleichheit. Behandle fehlende Datumsangaben mit required oder einer gesonderten Prüfung auf leere Werte.

Die nächste hilfreiche Handlung erklären

Eine Meldung sollte das Problem und seine Korrektur benennen. Sage bei einer fehlenden E-Mail-Adresse „Gib deine E-Mail-Adresse ein.“ Sage bei fehlerhaftem E-Mail-Text „Gib eine E-Mail-Adresse in der Form name@example.com ein.“ Erhalte den eingegebenen Wert, damit die Person ihn bearbeiten kann.

Ein Pflichtfeld für den Namen akzeptiert Leerzeichen, weil sie eine nicht leere Zeichenkette bilden. Prüfe name.value.trim() === "", wenn umgebende Leerraumzeichen nicht zählen sollen. Lösche diesen benutzerdefinierten Fehler, sobald aussagekräftiger Text vorliegt.

Meldungen mit Bedienelementen verknüpfen

<label for="email">Email</label>
<input id="email" name="email" type="email"
  required aria-describedby="email-error">
<p id="email-error"></p>

Platziere den Fehler in diesem Absatz und setze aria-invalid="true", solange das Feld einen Fehler hat. Lösche den Text und entferne aria-invalid oder setze es nach der Korrektur auf "false". aria-describedby verknüpft die Erklärung für assistive Technologien mit dem Feld. Nutze Text; ein roter Rahmen allein kann nicht allen vermitteln, was fehlgeschlagen ist.

Den Validierungsablauf wählen

Ergänze für vollständig benutzerdefinierte Meldungen novalidate und nutze einen submit-Listener am Formular. Aktualisiere benutzerdefinierte Regeln, prüfe die Gültigkeit der Felder, schreibe ihre Meldungen und verhindere das Absenden, wenn eine Prüfung fehlschlägt. Setze den Fokus auf das erste ungültige Feld oder eine verlinkte Fehlerübersicht. Wenn JavaScript auch das erfolgreiche Absenden lokal verarbeitet, verhindere auch diese Standardaktion des Absendens.

Vermeide es, unvollständigen E-Mail-Text bei jedem anfänglichen Tastendruck als Fehler zu melden. Eine nützliche Abfolge ist, Fehler nach dem Fokusverlust oder dem Absenden anzuzeigen und einen bereits gemeldeten Fehler dann bei input erneut zu prüfen.

Ein Bedienelement braucht mehr als eine Reaktion auf Klicks. Menschen müssen es finden, erreichen, seinen Zweck verstehen, es bedienen und sehen können, wo der Fokus liegt. Natives HTML stellt einen großen Teil dieses Verhaltens bereits bereit.

Das passende Element für die Aufgabe wählen

Nutze einen <button> für eine Aktion, ein <a href> für die Navigation und ein beschriftetes Formularfeld für Eingaben. <details> mit <summary> stellt einen Aufklappbereich bereit. Gestalte diese Elemente mit CSS passend zur Seite. Eine fokussierte Schaltfläche wird ohne zusätzlichen Tastatur-Listener durch Enter oder die Leertaste aktiviert.

Ein div-Element mit Klick-Listener hat weder die eingebaute Semantik noch das Tastaturverhalten einer Schaltfläche. role="button" ändert, was assistive Technologien ausgeben, macht es aber weder fokussierbar noch wandelt es Tastendrücke in Klicks um.

Die Fokusreihenfolge vorhersehbar halten

tabindex="0" nimmt ein Element in der normalen Dokumentreihenfolge in die Tab-Reihenfolge auf. tabindex="-1" erlaubt das Fokussieren per Code, ohne einen Tab-Stopp hinzuzufügen. Positive Werte setzen Elemente vor die übliche Reihenfolge und sind schwer zu pflegen; vermeide sie.

Keine der beiden Einstellungen ergänzt ein Aktivierungsverhalten. Eine fokussierbare eigene Schaltfläche benötigt weiterhin einen Listener für die Tastaturbedienung. Eine Rolle, ein Tab-Stopp und ein Callback lösen unterschiedliche Teile der Interaktion.

Jedem Bedienelement einen Namen geben

Ein Screenreader nutzt einen zugänglichen Namen, um Bedienelemente zu unterscheiden. Eine Textschaltfläche kann ihren sichtbaren Text nutzen. Ein Textfeld oder eine Auswahlliste benötigt eine zugeordnete Beschriftung, etwa <label for="email">Email</label> zusammen mit id="email". aria-labelledby kann auf sichtbaren Text an anderer Stelle verweisen; aria-label kann einen Namen bereitstellen, wenn es keinen geeigneten sichtbaren Text gibt.

Eine Schließen-Schaltfläche, die nur ein Symbol enthält, kann so aussehen: <button type="button" aria-label="Close">×</button>. Der Name beschreibt die Aktion, statt den Nutzer die Bedeutung des Symbols erschließen zu lassen.

Den Zustand anzeigen und durchsetzen

Halte einen Fokusindikator sichtbar. Wenn du die Standardumrandung ersetzt, biete mit :focus-visible einen klaren Ersatz an, zum Beispiel outline: 3px solid #1a73e8. Entfernst du sie ohne Ersatz, bleibt die Position des Tastaturnutzers verborgen.

Eine native deaktivierte Schaltfläche verlässt die Tab-Reihenfolge und kann nicht normal aktiviert werden. aria-disabled="true" teilt nur die Nichtverfügbarkeit mit. Die Klick- und Tastaturaktion eines eigenen Bedienelements muss diesen Zustand prüfen und zurückkehren, ohne etwas auszuführen. Eine zentrale Prüfung in der Aktivierungsfunktion hält beide Eingabewege konsistent.

Ein eigenes Bedienelement sollte unabhängig von der Art seiner Aktivierung dasselbe Ergebnis liefern. Halte die Aktion in einer Funktion, leite Tastatur- und Zeigerbedienung an sie weiter und aktualisiere den Zustand, den sowohl die Gestaltung als auch assistive Technologien auslesen.

Einer eigenen Schaltfläche Tastaturaktivierung geben

fakeButton.addEventListener("click", activate);
fakeButton.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    activate();
  }
});

Dies gilt für eine eigene fokussierbare Schaltfläche. Das Verhindern der Standardaktion der Leertaste verhindert, dass die Seite während der Aktion scrollt. Eine native Schaltfläche erzeugt bei Tastaturaktivierung bereits Klicks. Ein zweiter Weg über die Tastatur kann die Aktion dort daher zweimal ausführen.

Den zum Bedienelement passenden Zustand wählen

Eine Umschaltfläche „Stummschalten“ behält diese Beschriftung und ändert aria-pressed. Ändert die Gestaltung die Aktionsbeschriftung zu „Stummschaltung aufheben“, lass aria-pressed weg. Ein Kontrollkästchen nutzt role="checkbox" und die Leertaste zum Umschalten; ein Schalter nutzt role="switch" für den Ein-/Aus-Zustand.

Attribute enthalten Zeichenketten. Vergleiche getAttribute("aria-expanded") mit "true", nicht mit dem booleschen Wert true:

detailsButton.addEventListener("click", () => {
  const open = detailsButton.getAttribute(
    "aria-expanded") === "true";
  detailsButton.setAttribute("aria-expanded", String(!open));
  panel.hidden = open;
});

War open wahr, ist der neue Zustand falsch und der Bereich wird ausgeblendet. aria-controls kann den Bereich über seine ID bezeichnen. Die nativen Elemente <details> und <summary> bieten das Verhalten eines Aufklappbereichs ohne dieses Skript.

Nutze das Zustandsattribut als Quelle für die Gestaltung, etwa [aria-pressed="true"], damit sich der sichtbare und der ausgegebene Zustand gemeinsam ändern. Schließe aufklappende Bereiche mit Escape und gib den Fokus an ihr auslösendes Bedienelement zurück.

Einer Gruppe einen Tab-Stopp geben

Registerkarten, Werkzeugleisten und Optionsfeldgruppen nutzen Tab, um in die Gruppe hinein oder aus ihr heraus zu gelangen, und Pfeiltasten, um sich darin zu bewegen. Roving tabindex hält das aktuelle Element bei 0 und die anderen Elemente bei -1. Setze bei einer Bewegung das alte Element auf -1, das neue auf 0 und fokussiere das neue Element.

Bei drei Elementen führt rechts von Index 2 mit (2 + 1) % 3 zurück zu 0. Links von 0 nutzt (0 - 1 + 3) % 3, um zu 2 zu gelangen. Addiere die Länge vor der Restoperation, weil -1 % 3 in JavaScript −1 ist.

Prüfe mit der Tastatur: Erreiche das Bedienelement, sieh den Fokus, aktiviere es mit den passenden Tasten, bewege dich innerhalb einer Gruppe und schließe einen aufklappenden Bereich mit Escape. Prüfe bei jeder Änderung den sichtbaren Zustand und den ARIA-Zustand.

Der Fokus bestimmt, wohin die nächste Tastaturaktion geht. Verschwindet das fokussierte Bedienelement, kann der Nutzer seine Position verlieren. Behandle den Fokus als Teil der Seitenaktualisierung, besonders beim Öffnen eines Dialogs, beim Löschen eines Eintrags oder beim Melden eines Fehlers.

Einen Dialog öffnen und zum auslösenden Bedienelement zurückkehren

Merke dir vor dem Öffnen das fokussierte Element. Setze den Fokus in die neue Interaktion und stelle ihn beim Schließen wieder her:

let opener;
openButton.addEventListener("click", () => {
  opener = document.activeElement;
  dialog.showModal();
});
dialog.addEventListener("close", () => {
  if (opener && opener.isConnected) opener.focus();
});

showModal() an einem nativen Dialog setzt den Fokus hinein und macht den Rest der Seite inaktiv, sodass er nicht angeklickt oder fokussiert werden kann, solange der modale Dialog geöffnet ist. Escape löst normalerweise ein cancel-Ereignis aus, gefolgt vom Schließen und einem close-Ereignis. Ein cancel-Listener kann das Schließen verhindern, wenn die Anwendung dieses Verhalten benötigt.

Wähle im Dialog eine sinnvolle anfängliche Fokusposition, etwa sein erstes relevantes Bedienelement. Bei einem eigenen aufklappenden Bereich muss Code den Fokus gezielt verschieben. Existiert das ursprüngliche auslösende Bedienelement nicht mehr, wähle stattdessen ein sinnvolles Bedienelement in der Nähe, statt ein losgelöstes Element zu fokussieren.

Ein sinnvolles Ziel fokussierbar machen

Eine Überschrift oder Fehlerübersicht ist normalerweise nicht fokussierbar. Gib ihr tabindex="-1", bevor du .focus() aufrufst. Sie kann dann gezielt den Fokus erhalten, ohne bei der normalen Tab-Navigation zu einem zusätzlichen Stopp zu werden. Nutze 0 nur, wenn sie in diese normale Reihenfolge gehört.

Die Position nach dem Löschen erhalten

Bevor du einen Listeneintrag entfernst, dessen Löschschaltfläche den Fokus hat, finde das nächste sinnvolle Ziel. Fokussiere die Schaltfläche des nächsten Eintrags; gibt es keinen nächsten Eintrag, nutze die Schaltfläche des vorherigen. Wird die Liste leer, fokussiere ihre Überschrift mit tabindex="-1".

Wenn du das Ziel vor dem Entfernen findest, geht die Beziehung zu benachbarten Einträgen nicht verloren. Setze den Fokus nicht nach jedem Löschen an den Anfang des Dokuments; die Person sollte in der Nähe der Änderung weiterarbeiten können.

Den Fokus innerhalb einer fortlaufenden Interaktion halten

Ein aufklappender Bereich kann sich schließen, wenn der Fokus seinen gesamten Bereich verlässt. Das Ereignis focusout, das die Bubbling-Phase durchläuft, liefert das Ziel:

menu.addEventListener("focusout", (event) => {
  if (!menu.contains(event.relatedTarget)) {
    menu.hidden = true;
  }
});

Eine Bewegung zwischen zwei Menüelementen schließt das Menü nicht, weil das Ziel innerhalb bleibt. Ein Ziel mit dem Wert null liegt ebenfalls außerhalb; contains(null) ist falsch. Gib den Fokus nicht automatisch an das auslösende Bedienelement zurück, wenn der Nutzer bewusst zu einem anderen Bedienelement der Seite gewechselt ist.

Änderungen vorhersehbar machen

Setze nach einer fehlgeschlagenen benutzerdefinierten Formularvalidierung den Fokus auf das erste ungültige Feld oder eine Fehlerübersicht, die zu den Fehlern verlinkt. Die integrierte Validierung fokussiert bereits ein ungültiges Feld. Halte den Fehlertext verfügbar, damit die Person weiß, was sie korrigieren muss.

Springe nicht zu einem neuen Feld, während der Nutzer tippt, und navigiere nicht, sobald sich eine Auswahlliste ändert. Lass eine eindeutige Aktion die Änderung bestätigen. Fokusbewegungen sollten eine bewusste Handlung oder die Behebung eines Fehlers unterstützen und die normale Eingabe nicht unterbrechen.