MutationEvent.attrChange — Eigenschaft · JavaScript-Referenz

Signatur

MutationEvent.attrChange

Beschreibung

Die schreibgeschützte Eigenschaft attrChange der Schnittstelle MutationEvent sagt aus, welche Art von Attributänderung ein DOMAttrModified-Ereignis ausgelöst hat. Der Wert ist eine der drei Konstanten, die auf MutationEvent definiert sind:

MutationEvent.MODIFICATION (1): Der Wert eines vorhandenen Attributs wurde geändert.
MutationEvent.ADDITION (2): Das Attribut wurde neu hinzugefügt.
MutationEvent.REMOVAL (3): Das Attribut wurde entfernt.

Zusammen mit attrName, prevValue und newValue ließ sich damit früher genau nachvollziehen, was mit einem Attribut passiert ist. Bei allen anderen Mutation-Events (z. B. DOMNodeInserted, DOMSubtreeModified) ist der Wert bedeutungslos und in der Regel 0.

Wichtig: Mutation-Events sind veraltet und werden aus den Browsern entfernt. Für neuen Code sollte man ausschließlich MutationObserver verwenden. Dort gibt es kein direktes Gegenstück zu attrChange, aber die Art der Änderung lässt sich aus MutationRecord.oldValue und dem aktuellen Attributwert ableiten (siehe Beispiele).

Rückgabewert

Typ

number

Beschreibung

1 (MODIFICATION), 2 (ADDITION) oder 3 (REMOVAL). Bei Ereignissen, die kein DOMAttrModified sind, normalerweise 0.

Beispiele

Art der Attributänderung auswerten (Altcode)

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

const arten = {
  [MutationEvent.MODIFICATION]: 'geändert',
  [MutationEvent.ADDITION]: 'hinzugefügt',
  [MutationEvent.REMOVAL]: 'entfernt'
};

const onAttr = (event) => {
  console.log(`${event.attrName} ${arten[event.attrChange]}:`,
    event.prevValue, '→', event.newValue);
};

box.addEventListener('DOMAttrModified', onAttr);

box.setAttribute('data-status', 'aktiv');   // ADDITION
box.setAttribute('data-status', 'inaktiv'); // MODIFICATION
box.removeAttribute('data-status');         // REMOVAL

// Listener wieder entfernen
box.removeEventListener('DOMAttrModified', onAttr);

data-status hinzugefügt: → aktiv data-status geändert: aktiv → inaktiv data-status entfernt: inaktiv → (nur in Browsern, die DOMAttrModified noch auslösen)

Moderner Ersatz: attrChange mit MutationObserver nachbilden

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

const ermittleArt = (record) => {
  const aktuell = record.target.getAttribute(record.attributeName);
  if (record.oldValue === null) return 'hinzugefügt';   // entspricht ADDITION
  if (aktuell === null) return 'entfernt';              // entspricht REMOVAL
  return 'geändert';                                    // entspricht MODIFICATION
};

const observer = new MutationObserver((records) => {
  for (const record of records) {
    console.log(`${record.attributeName} ${ermittleArt(record)}`);
  }
});

observer.observe(box, { attributes: true, attributeOldValue: true });

box.setAttribute('title', 'Hallo');
box.setAttribute('title', 'Welt');
box.removeAttribute('title');

title hinzugefügt title geändert title entfernt (Hinweis: Weil die Records gesammelt geliefert werden, liest getAttribute() den Endzustand. Bei schnell aufeinanderfolgenden Änderungen kann die Einordnung deshalb abweichen. Im Zweifel den Wert selbst mitverfolgen.)

Feature-Erkennung vor der Nutzung

const hatMutationEvents = typeof window.MutationEvent === 'function'
  && 'attrChange' in MutationEvent.prototype;

console.log(hatMutationEvents
  ? 'MutationEvent verfügbar – trotzdem besser MutationObserver nutzen'
  : 'Kein MutationEvent – MutationObserver verwenden');

Kein MutationEvent – MutationObserver verwenden

// Wichtig · Fallstricke

Veraltet: Mutation-Events sind aus der Spezifikation gestrichen. Chromium-Browser (Chrome, Edge) haben sie ab Version 127 standardmäßig entfernt, und Firefox und Safari wollen folgen. Neuer Code sollte sich nicht darauf verlassen.
Uneinheitliche Unterstützung: Chrome/Blink hat DOMAttrModified nie ausgelöst. attrChange war dort also auch vor der Entfernung praktisch nicht nutzbar. Verlässlich lief es vor allem in Firefox und älteren Opera-Versionen.
Leistung: Mutation-Events laufen synchron bei jeder DOM-Änderung und bremsen DOM-Operationen spürbar aus. MutationObserver sammelt die Änderungen dagegen und liefert sie asynchron als Mikrotask.
Der Wert ist nur bei DOMAttrModified sinnvoll. Bei anderen Mutation-Events ist er 0.
Statt der Zahlen besser die Konstanten MutationEvent.MODIFICATION, ADDITION und REMOVAL verwenden, das ist lesbarer.

Siehe auch

MutationEvent.relatedNode MutationEvent.attrName MutationEvent.newValue MutationEvent.prevValue MutationRecord.attributeName