ToggleEvent.source — Eigenschaft · JavaScript-Referenz

Signatur

ToggleEvent.source

Beschreibung

Die schreibgeschützte Eigenschaft source eines ToggleEvent verweist auf das Steuerelement, das den Zustandswechsel eines Popovers ausgelöst hat. Meist ist das ein <button> mit dem Attribut popovertarget oder mit commandfor und command="toggle-popover", "show-popover" bzw. "hide-popover". Die Eigenschaft ist in den Ereignissen beforetoggle und toggle verfügbar.

Nützlich ist das vor allem, wenn mehrere Auslöser dasselbe Popover steuern. Ein Beispiel ist ein gemeinsames Kontextmenü für viele Listeneinträge: Über event.source findest du heraus, welcher Eintrag angeklickt wurde. So kannst du Inhalt, Beschriftung oder Datensatz-ID passend setzen, ohne für jeden Button einen eigenen click-Listener zu schreiben.

Öffnest du ein Popover per Skript, kannst du die Quelle selbst angeben: mit showPopover({ source }), togglePopover({ source }) oder hidePopover() in Browsern, die das Options-Objekt unterstützen. Gibt es keinen Auslöser, ist der Wert null. Das gilt für ein Skript-Aufruf ohne source, für einen „Light Dismiss“ (Klick außerhalb) und für die Escape-Taste.

Rückgabewert

Typ

Element | null

Beschreibung

Das Element, das den Wechsel ausgelöst hat (z. B. der <button> mit popovertarget). null, wenn es keinen Auslöser gibt.

Beispiele

Gemeinsames Kontextmenü für mehrere Buttons

// HTML:
// <button popovertarget="menu" data-id="42">Aktionen für #42</button>
// <button popovertarget="menu" data-id="43">Aktionen für #43</button>
// <div id="menu" popover><p id="menu-title"></p></div>

const menu = document.getElementById('menu');
const title = document.getElementById('menu-title');

menu.addEventListener('beforetoggle', (event) => {
  if (event.newState !== 'open') return;
  const id = event.source?.dataset.id ?? 'unbekannt';
  title.textContent = `Datensatz #${id}`;
  console.log('Geöffnet durch:', event.source);
});

Geöffnet durch: <button popovertarget="menu" data-id="42">…</button>

Quelle beim Öffnen per Skript angeben

const popover = document.getElementById('info');
const trigger = document.getElementById('info-btn');

popover.addEventListener('toggle', (event) => {
  console.log(event.newState, event.source?.id ?? null);
});

// Quelle explizit übergeben
popover.showPopover({ source: trigger });

// Ohne Quelle geöffnet → source ist null
setTimeout(() => {
  popover.hidePopover();
  popover.showPopover();
}, 500);

open info-btn closed null open null

Auslöser beim Schließen hervorheben bzw. zurücksetzen

const tip = document.getElementById('tip');

tip.addEventListener('toggle', (event) => {
  const btn = event.source;
  if (!btn) return; // z. B. Escape oder Light Dismiss
  btn.classList.toggle('is-active', event.newState === 'open');
});

ToggleEvent mit source selbst erzeugen

const btn = document.createElement('button');
const ev = new ToggleEvent('toggle', {
  oldState: 'closed',
  newState: 'open',
  source: btn
});

console.log(ev.source === btn);

true

// Wichtig · Fallstricke

Kompatibilität: source ist sehr neu. In älteren Browsern ist der Wert undefined. Greif deshalb defensiv mit event.source?.… zu oder prüf vorher mit 'source' in ToggleEvent.prototype, ob die Eigenschaft unterstützt wird.
Mit null musst du immer rechnen: bei Escape, bei Light Dismiss (Klick außerhalb), wenn ein anderes Popover das aktuelle automatisch schließt, und bei Skript-Aufrufen ohne source-Option.
Die Option { source } für showPopover()/togglePopover() wird nicht überall gleich lange unterstützt wie das Popover-API selbst. Ältere Browser ignorieren das Objekt stillschweigend.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie event.source = x hat keine Wirkung.
Aus Datenschutzgründen kann das zurückgegebene Element angepasst sein, wenn der Auslöser in einem Shadow Tree liegt, den der Listener nicht sehen darf. Dann bekommst du den passenden Host bzw. null statt des inneren Elements.

Siehe auch

ToggleEvent.newState ToggleEvent.oldState CommandEvent.source MessageEvent.source InterestEvent.source