TimeEvent.view — Eigenschaft · JavaScript-Referenz

Signatur

TimeEvent.view

Beschreibung

TimeEvent ist die Ereignis-Schnittstelle für SVG-/SMIL-Animationen. Sie wird für die Ereignisse beginEvent, endEvent und repeatEvent verwendet, die Animationselemente wie <animate>, <animateTransform>, <animateMotion> oder <set> auslösen. Die Eigenschaft view verweist auf das Fenster (genauer: das WindowProxy), zu dem das Dokument mit dem Animationselement gehört.

Normalerweise ist event.view einfach identisch mit window. Nützlich wird die Eigenschaft, wenn ein gemeinsamer Handler Ereignisse aus mehreren Fenstern oder <iframe>-Dokumenten verarbeitet. Dann lässt sich über event.view das Ursprungsfenster und über event.view.document das zugehörige Dokument ermitteln, ohne diese Information selbst mitschleppen zu müssen.

Die Eigenschaft ist schreibgeschützt. Gesetzt wird sie entweder vom Browser beim Auslösen des Ereignisses oder, bei selbst erzeugten Ereignissen, über den veralteten Aufruf initTimeEvent(typeArg, viewArg, detailArg). Als Eigenschaft nimmt sie keine Parameter entgegen.

Rückgabewert

Typ

WindowProxy | null

Beschreibung

Das Fenster, in dem das Ereignis erzeugt wurde. Normalerweise ist das window des Dokuments mit dem Animationselement. Bei künstlich erzeugten Ereignissen ohne gesetzte Ansicht ist der Wert null.

Beispiele

Ursprungsfenster beim Start einer Animation prüfen

// HTML: <svg><rect width="50" height="50"><animate id="anim" attributeName="x" from="0" to="200" dur="2s" begin="0s" /></rect></svg>
const anim = document.getElementById('anim');

anim.addEventListener('beginEvent', (event) => {
  console.log('Animation gestartet');
  console.log('Gleiches Fenster:', event.view === window);
});

Animation gestartet Gleiches Fenster: true

Gemeinsamer Handler für Animationen in mehreren iframes

// Alle gleichen Ursprungs (same-origin) iframes überwachen
const logAnimationEnd = (event) => {
  const quelle = event.view ?? window;
  // Über view auf das Dokument des Ursprungsfensters zugreifen
  console.log(`Animation beendet in: ${quelle.document.title}`);
};

for (const frame of document.querySelectorAll('iframe')) {
  frame.addEventListener('load', () => {
    const doc = frame.contentDocument;
    doc.querySelectorAll('animate, animateTransform, animateMotion, set')
      .forEach((el) => el.addEventListener('endEvent', logAnimationEnd));
  });
}

Animation beendet in: Diagramm A Animation beendet in: Diagramm B

view und detail bei Wiederholungen auswerten

// HTML: <circle r="10"><animate id="puls" attributeName="r" values="10;20;10" dur="1s" repeatCount="3" /></circle>
const puls = document.getElementById('puls');

const onRepeat = (event) => {
  const breite = event.view?.innerWidth ?? 'unbekannt';
  console.log(`Wiederholung ${event.detail}, Fensterbreite: ${breite}px`);
  if (event.detail >= 2) {
    puls.removeEventListener('repeatEvent', onRepeat);
  }
};

puls.addEventListener('repeatEvent', onRepeat);

Wiederholung 1, Fensterbreite: 1280px Wiederholung 2, Fensterbreite: 1280px

// Wichtig · Fallstricke

Browser-Unterstützung: SMIL-Ereignisse (beginEvent, endEvent, repeatEvent) werden von den gängigen Browsern ausgelöst. Ob das Ereignisobjekt tatsächlich eine TimeEvent-Instanz mit view ist, hängt aber vom Browser ab. Vorher prüfen, z. B. mit 'TimeEvent' in window, oder defensiv mit event.view ?? window arbeiten.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie event.view = x wird stillschweigend ignoriert und löst im Strict Mode einen Fehler aus.
Kommt das Ereignis aus einem <iframe> mit anderem Ursprung, liefert event.view zwar ein WindowProxy. Ein Zugriff auf view.document scheitert aber an der Same-Origin-Policy und löst einen SecurityError aus.
Die Ereignis-Handler-Eigenschaften heißen onbegin, onend und onrepeat. Mit addEventListener werden dagegen die Ereignisnamen beginEvent, endEvent und repeatEvent verwendet.
initTimeEvent() ist veraltet. Für eigene Ereignisse besser new Event() oder new CustomEvent() verwenden.

Siehe auch

Window ErrorEvent.lineno TimeEvent.detail UIEvent.view TextEvent.data