Element: DOMActivate — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("DOMActivate", handler)

Beschreibung

Das Ereignis DOMActivate wird an einem Element ausgelöst, wenn es aktiviert wird, z. B. ein Button per Mausklick oder ein Link per Enter-Taste. Die Idee dahinter war ein geräteunabhängiges Aktivierungsereignis: Egal ob Maus, Tastatur oder Hilfstechnologie, der Code sollte nur auf „Aktivierung“ reagieren müssen.

Das Ereignis ist vom Typ UIEvent, es steigt auf (bubbles) und ist abbrechbar (cancelable). Über event.detail lässt sich laut Spezifikation die Art der Aktivierung erkennen (1 = einfache Aktivierung, 2 = Hyperaktivierung, etwa ein Doppelklick).

Die Spezifikation UI Events stuft DOMActivate als veraltet ein. Stattdessen soll man das click-Ereignis verwenden: Browser lösen click auch bei Tastatur-Aktivierung von Buttons und Links aus, deshalb deckt es denselben Zweck ab. Für DOMActivate gibt es keine on-Eigenschaft (onDOMActivate existiert nicht). Man kann den Listener nur über addEventListener() registrieren.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier exakt `"DOMActivate"` (Groß-/Kleinschreibung beachten).
$handler Pflicht	(event: UIEvent) => void \| EventListener		Callback, der beim Aktivieren aufgerufen wird. Er erhält ein `UIEvent` mit `detail`, `view` und `target`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler erhält ein UIEvent-Objekt.

Beispiele

Listener mit addEventListener registrieren

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

button.addEventListener('DOMActivate', (event) => {
  console.log('Aktiviert:', event.target.id, '| detail:', event.detail);
});

// Zum Testen ein synthetisches Ereignis auslösen
button.dispatchEvent(new UIEvent('DOMActivate', {
  bubbles: true,
  cancelable: true,
  view: window,
  detail: 1
}));

Aktiviert: speichern | detail: 1

Listener wieder entfernen (removeEventListener)

const link = document.querySelector('a.hilfe');

const onActivate = (event) => {
  event.preventDefault();
  console.log('Hilfe wurde aktiviert');
};

link.addEventListener('DOMActivate', onActivate);

// Später, z. B. beim Abbau der Komponente:
link.removeEventListener('DOMActivate', onActivate);

// Hinweis: Eine on-Eigenschaft gibt es nicht
console.log('onDOMActivate' in link);

false

Moderner Ersatz: click deckt Maus und Tastatur ab

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

// click wird bei <button> auch durch Enter/Leertaste ausgelöst
button.addEventListener('click', (event) => {
  // event.detail === 0 bedeutet meist: Tastatur-Aktivierung
  const quelle = event.detail === 0 ? 'Tastatur' : 'Maus';
  console.log(`Button aktiviert per ${quelle}`);
});

Button aktiviert per Tastatur (nach Enter) Button aktiviert per Maus (nach Klick)

Delegation über Aufsteigen (Bubbling) mit AbortController

const controller = new AbortController();
const toolbar = document.querySelector('.toolbar');

toolbar.addEventListener('DOMActivate', (event) => {
  const aktion = event.target.closest('[data-aktion]')?.dataset.aktion;
  if (aktion) console.log('Aktion:', aktion);
}, { signal: controller.signal });

// Alle Listener auf einmal entfernen
controller.abort();

// Wichtig · Fallstricke

Veraltet: Die Spezifikation UI Events führt DOMActivate als veraltet. Neuer Code sollte click verwenden (bei Bedarf zusätzlich keydown für eigene, nicht-native Steuerelemente).
Browser-Kompatibilität: Ob und wann Browser das Ereignis nativ auslösen, ist uneinheitlich. Chromium und WebKit lösen es intern bei Aktivierungen aus, Firefox verhält sich teils anders. Verlass dich nicht darauf, dass es nativ gefeuert wird. Synthetische Ereignisse per dispatchEvent() funktionieren überall.
Keine on-Eigenschaft: element.onDOMActivate = … hat keine Wirkung. Nur addEventListener() funktioniert.
Barrierefreiheit: Native Elemente wie <button> und <a href> lösen click auch per Tastatur aus. Bei <div role=\"button\"> musst du Tastaturbedienung und tabindex selbst umsetzen. DOMActivate nimmt dir diese Arbeit nicht ab.
Groß-/Kleinschreibung beachten: \"domactivate\" ist ein anderes Ereignis und wird nie ausgelöst.

Siehe auch

UIEvent UIEvent.detail EventTarget.addEventListener() EventTarget.removeEventListener() Element: dblclick