Element: click — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("click", handler)

Beschreibung

Das click-Ereignis wird auf einem Element ausgelöst, wenn eines dieser Dinge passiert:

Die primäre Zeigertaste wird über dem Element gedrückt und über demselben Element wieder losgelassen (auf dem gemeinsamen Vorfahren, falls sich das Ziel zwischen mousedown und mouseup geändert hat).
Auf einem Touchscreen wird auf das Element getippt.
Ein fokussiertes, aktivierbares Element wird über die Tastatur ausgelöst, z. B. <button> mit Enter oder Leertaste oder <a href> mit Enter.
Ein Skript ruft element.click() auf.

Der Handler bekommt ein PointerEvent (in älteren Browsern ein MouseEvent) mit Eigenschaften wie clientX/clientY, button, detail (Anzahl der Klicks hintereinander) und den Modifikatortasten ctrlKey, shiftKey, altKey und metaKey. Das Ereignis steigt im DOM auf (Bubbling) und lässt sich abbrechen: preventDefault() verhindert Standardaktionen wie das Folgen eines Links oder das Absenden eines Formulars.

Die Reihenfolge ist pointerdown → mousedown → pointerup → mouseup → click. Einen Handler registrierst du mit addEventListener("click", handler) oder über die Eigenschaft onclick. Weil das Ereignis aufsteigt, eignet es sich gut für Event-Delegation: Ein einziger Handler auf einem Container verarbeitet die Klicks vieler Kindelemente, auch solcher, die erst später eingefügt werden.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"click"`.
$handler Pflicht	(event: PointerEvent) => void \| EventListenerObject		Callback, der bei jedem Klick mit dem Ereignisobjekt aufgerufen wird. Ältere Browser übergeben ein `MouseEvent`.
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Steuert die Capture-Phase, das einmalige Ausführen (`once`) und das Entfernen über ein `AbortSignal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Rückgabewert eines onclick-Handlers ist ebenfalls bedeutungslos, außer false bei Inline-Attributen (entspricht preventDefault()).

Beispiele

Klick-Handler mit addEventListener und Modifikatortasten

const button = document.querySelector('#speichern');

button.addEventListener('click', (event) => {
  // detail = Anzahl aufeinanderfolgender Klicks
  console.log(`Klick Nr. ${event.detail} bei (${event.clientX}, ${event.clientY})`);
  if (event.shiftKey) {
    console.log('Mit gedrückter Umschalttaste gespeichert');
  }
});

Klick Nr. 1 bei (120, 48)

Handler entfernen: removeEventListener und onclick

const hinweis = document.querySelector('#hinweis');

const schliessen = () => {
  hinweis.hidden = true;
  // Referenz auf dieselbe Funktion nötig
  hinweis.removeEventListener('click', schliessen);
};
hinweis.addEventListener('click', schliessen);

// Alternative über die on-Property (nur ein Handler möglich)
const banner = document.querySelector('#banner');
banner.onclick = () => console.log('Banner geklickt');
// Entfernen:
// banner.onclick = null;

Banner geklickt

Event-Delegation für eine dynamische Liste

const liste = document.querySelector('#todo-liste');

liste.addEventListener('click', (event) => {
  const loeschen = event.target.closest('button.loeschen');
  if (!loeschen || !liste.contains(loeschen)) return;

  const eintrag = loeschen.closest('li');
  console.log(`Entferne: ${eintrag.dataset.id}`);
  eintrag.remove();
});

// Funktioniert auch für später eingefügte Einträge
liste.insertAdjacentHTML('beforeend',
  '<li data-id="42">Neu <button class="loeschen">×</button></li>');

Entferne: 42

Standardaktion verhindern und einmaligen Handler per AbortSignal steuern

const controller = new AbortController();
const link = document.querySelector('a.extern');

link.addEventListener('click', (event) => {
  if (!confirm('Externe Seite öffnen?')) {
    event.preventDefault(); // Navigation abbrechen
  }
}, { signal: controller.signal });

// Später alle so registrierten Handler auf einmal entfernen
// controller.abort();

// Wichtig · Fallstricke

Barrierefreiheit: Hänge click nicht an <div> oder <span>. Diese Elemente sind nicht fokussierbar und lösen bei Enter oder Leertaste kein click aus. Nimm stattdessen <button> bzw. <a href>. Wenn das nicht geht, brauchst du role="button", tabindex="0" und eine eigene Tastaturbehandlung.
Typ des Ereignisobjekts: Chrome, Edge, Firefox (ab 120) und Safari (ab 17) liefern ein PointerEvent, ältere Versionen ein MouseEvent. Frage event.pointerType daher nur ab, wenn die Eigenschaft vorhanden ist.
Tastatur und Skript: Bei Tastatur-Aktivierung oder element.click() sind clientX/clientY meist 0 und detail ist 0.
Nicht die Haupttaste: Rechtsklick löst contextmenu aus, die mittlere Maustaste auxclick. Deaktivierte Formularelemente (disabled) empfangen kein click.
Doppelklick: Vor einem dblclick kommen immer zwei click-Ereignisse. Wenn du beides unterscheiden musst, werte event.detail aus.
onclick vs. addEventListener: Die Property hält nur einen Handler, eine neue Zuweisung überschreibt ihn. Inline-Attribute wie onclick="…" werden von einer strengen CSP (ohne 'unsafe-inline') blockiert.
Touch: Ältere Mobilbrowser verzögern click um rund 300 ms. Mit <meta name="viewport" content="width=device-width"> oder touch-action: manipulation entfällt die Verzögerung.
Nutze event.target bei Delegation immer zusammen mit closest(), weil das Ziel auch ein verschachteltes Kindelement (z. B. ein Icon) sein kann.

Siehe auch

HTMLElement.prototype.click() EventTarget.prototype.addEventListener() Event.prototype.preventDefault() PointerEvent MouseEvent