TimeEvent.initTimeEvent() — Methode · JavaScript-Referenz

Signatur

TimeEvent.prototype.initTimeEvent(typeArg, viewArg, detailArg)

Beschreibung

initTimeEvent() gehört zum Interface TimeEvent, das in SVG-/SMIL-Animationen für die Zeitereignisse beginEvent, endEvent und repeatEvent verwendet wird. Die Methode füllt ein „leeres“ Event-Objekt, das mit document.createEvent("TimeEvent") erzeugt wurde, mit Werten, bevor es per dispatchEvent() ausgelöst wird.

Man braucht die Methode vor allem, um SMIL-Zeitereignisse künstlich auszulösen, z. B. in Tests oder um Code, der auf endEvent einer <animate>-Animation wartet, gezielt anzustoßen. Der Parameter detailArg entspricht später der Eigenschaft TimeEvent.detail, die bei repeatEvent die aktuelle Wiederholungsnummer angibt.

Die Methode muss vor dem Auslösen aufgerufen werden; nach dem Dispatch hat ein erneuter Aufruf keine Wirkung. Anders als bei initEvent() gibt es keine Parameter für bubbles oder cancelable – Zeitereignisse blubbern nicht und sind nicht abbrechbar.

Parameter

Name	Typ	Beschreibung
$typeArg Pflicht	string	Ereignistyp, typischerweise `"beginEvent"`, `"endEvent"` oder `"repeatEvent"`. Eigene Typnamen sind ebenfalls möglich.
$viewArg Pflicht	Window \| null	Das `Window` (AbstractView), zu dem das Ereignis gehört; landet in `TimeEvent.view`. Meist `window`.
$detailArg Pflicht	number	Ganzzahliger Detailwert (long); landet in `TimeEvent.detail`. Bei `repeatEvent` die Wiederholungsnummer, sonst üblicherweise `0`.

Beispiele

endEvent künstlich auslösen

// <svg><rect><animate id="fade" attributeName="opacity" from="1" to="0" dur="2s"/></rect></svg>
const anim = document.getElementById('fade');

anim.addEventListener('endEvent', (e) => {
  console.log(`Animation beendet (detail: ${e.detail})`);
});

const evt = document.createEvent('TimeEvent');
evt.initTimeEvent('endEvent', window, 0);
anim.dispatchEvent(evt);

Animation beendet (detail: 0)

repeatEvent mit Wiederholungsnummer simulieren

const anim = document.querySelector('animate');

anim.onrepeat = (e) => {
  console.log(`Wiederholung Nr. ${e.detail}`);
};

const fireRepeat = (n) => {
  const evt = document.createEvent('TimeEvent');
  evt.initTimeEvent('repeatEvent', window, n);
  anim.dispatchEvent(evt);
};

fireRepeat(3);

Wiederholung Nr. 3

Mit Feature-Erkennung und Fallback

const createTimeEvent = (type, detail = 0) => {
  try {
    const evt = document.createEvent('TimeEvent');
    evt.initTimeEvent(type, window, detail);
    return evt;
  } catch {
    // Browser ohne TimeEvent-Unterstützung: CustomEvent als Ersatz
    return new CustomEvent(type, { detail });
  }
};

const evt = createTimeEvent('beginEvent');
console.log(evt.type, evt.detail);

beginEvent 0

// Wichtig · Fallstricke

Browser-Kompatibilität: TimeEvent und document.createEvent(\"TimeEvent\") werden nicht überall unterstützt (vor allem Firefox). In anderen Browsern wirft createEvent einen NotSupportedError – daher Feature-Erkennung oder try/catch verwenden.
Das init*Event()-Muster gilt als veraltet. Für eigene Ereignisse besser new CustomEvent(type, { detail }) nutzen. Einen eigenen Konstruktor new TimeEvent() gibt es nicht.
Ein künstlich ausgelöstes Ereignis ändert nicht den Zustand der Animation. Zum Starten oder Stoppen dienen SVGAnimationElement.beginElement() bzw. endElement().
Künstliche Ereignisse haben isTrusted === false.
Es gibt keine Parameter für bubbles und cancelable. Listener müssen deshalb direkt am Animationselement hängen.

Siehe auch

new IDBVersionChangeEvent() TextEvent.initTextEvent() UIEvent.initUIEvent() Event.initEvent() MouseEvent.initMouseEvent()