TimeEvent.detail — Eigenschaft · JavaScript-Referenz

Signatur

TimeEvent.detail

Beschreibung

TimeEvent.detail ist eine schreibgeschützte Eigenschaft des Interfaces TimeEvent. Solche Ereignisse lösen SVG-Animationselemente (<animate>, <animateTransform>, <animateMotion>, <set>) aus, wenn eine SMIL-Animation startet, endet oder sich wiederholt. Welche Bedeutung der Wert hat, hängt vom Ereignistyp ab.

repeatEvent: detail enthält die Nummer der Wiederholung, die gerade beginnt. Die erste Wiederholung (also der zweite Durchlauf) hat den Wert 1.
beginEvent und endEvent: detail ist hier bedeutungslos und in der Regel 0.

In der Praxis brauchen Sie die Eigenschaft vor allem, um auf bestimmte Durchläufe einer wiederholten Animation zu reagieren, etwa um einen Zähler anzuzeigen, nach n Durchläufen etwas zu ändern oder Animationen zu synchronisieren. Die Eigenschaft hat keine Parameter, weil sie nur gelesen wird.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (long). Bei repeatEvent ist das die Nummer der aktuellen Wiederholung (ab 1), bei beginEvent und endEvent in der Regel 0.

Beispiele

Wiederholungen einer SVG-Animation mitzählen

// HTML: <svg width="120" height="120"><circle cx="60" cy="60" r="20" fill="tomato">
//   <animate id="puls" attributeName="r" values="20;50;20" dur="1s" repeatCount="5" />
// </circle></svg>
const anim = document.getElementById('puls');

anim.addEventListener('repeatEvent', (event) => {
  console.log(`Wiederholung Nr. ${event.detail}`);
});

Wiederholung Nr. 1 Wiederholung Nr. 2 Wiederholung Nr. 3 Wiederholung Nr. 4

Nach dem dritten Durchlauf die Farbe wechseln (on-Property)

const anim = document.getElementById('puls');
const circle = anim.parentElement;

// Alternative zu addEventListener: on-Property des Animationselements
anim.onrepeat = (event) => {
  if (event.detail === 3) {
    circle.setAttribute('fill', 'steelblue');
    console.log('Farbwechsel nach Durchlauf', event.detail);
  }
};

Farbwechsel nach Durchlauf 3

detail bei beginEvent und endEvent

const anim = document.getElementById('puls');

const logDetail = (event) => console.log(event.type, event.detail);

anim.addEventListener('beginEvent', logDetail);
anim.addEventListener('endEvent', (event) => {
  logDetail(event);
  // Listener aufräumen, wenn die Animation fertig ist
  anim.removeEventListener('beginEvent', logDetail);
});

beginEvent 0 endEvent 0

// Wichtig · Fallstricke

Keine Zählung beim ersten Durchlauf: Für den ersten Durchlauf wird kein repeatEvent ausgelöst, sondern beginEvent. Das erste repeatEvent hat daher detail === 1. Bei repeatCount="5" kommen also nur vier repeatEvents an.
Ereignisnamen: Die Typen heißen beginEvent, endEvent und repeatEvent, die zugehörigen on-Properties dagegen onbegin, onend und onrepeat.
Schreibgeschützt: Wenn Sie detail etwas zuweisen, passiert nichts. Eigene Werte lassen sich nur über die veraltete Methode initTimeEvent() setzen.
Nicht verwechseln mit UIEvent.detail (z. B. die Anzahl der Klicks) oder CustomEvent.detail (beliebige Nutzdaten). Die Bedeutung ist dort jeweils eine andere.
Kompatibilität: TimeEvent gibt es nur für SMIL-Animationen in SVG. Moderne Desktop- und Mobilbrowser unterstützen es. Bei Ereignissen, die schnell hintereinander kommen, oder bei Tabs im Hintergrund kann es aber sein, dass manche Browser einzelne repeatEvents zusammenfassen oder auslassen. Verlassen Sie sich deshalb nicht auf lückenlos aufsteigende Werte. Für CSS-Animationen verwenden Sie stattdessen animationiteration.

Siehe auch

TimeEvent.view UIEvent.detail CustomEvent.detail TextEvent.data BlobEvent.data