CommandEvent.source — Eigenschaft · JavaScript-Referenz

Signatur

CommandEvent.source

Beschreibung

Die Eigenschaft source des Interfaces CommandEvent gibt das Element zurück, das den Befehl ausgelöst hat. Bei der Invoker Commands API ist das in der Regel ein <button> mit den Attributen commandfor und command. Das Event selbst wird am Zielelement (dem per commandfor referenzierten Element) ausgelöst. Über event.source erfährst du also, welcher Button geklickt wurde.

Das ist vor allem dann nützlich, wenn mehrere Buttons dasselbe Ziel steuern, etwa ein Dialog mit „Speichern“- und „Abbrechen“-Buttons oder mehrere Auslöser für ein Popover. Der Handler kann dann über source auf Datenattribute, Beschriftung oder Zustand des auslösenden Buttons zugreifen und passend reagieren.

Die Eigenschaft ist schreibgeschützt. Bei synthetischen Events legst du sie im Konstruktor über das Options-Objekt fest: new CommandEvent("command", { command, source }). Ohne Angabe ist der Wert null.

Rückgabewert

Typ

Element | null

Beschreibung

Das auslösende Steuerelement, typischerweise ein HTMLButtonElement, oder null, wenn keine Quelle gesetzt wurde (z. B. bei einem synthetischen Event ohne source).

Beispiele

Auslösenden Button im command-Handler ermitteln

// HTML:
// <button commandfor="panel" command="--rotate-left">Links</button>
// <button commandfor="panel" command="--rotate-right">Rechts</button>
// <div id="panel">Inhalt</div>

const panel = document.getElementById("panel");

panel.addEventListener("command", (event) => {
  // event.target ist das Panel, event.source der geklickte Button
  console.log(`Befehl ${event.command} von „${event.source.textContent}“`);
});

Befehl --rotate-left von „Links“

Dialog-Ergebnis anhand des Quell-Buttons auswerten

// <dialog id="confirm">
//   <button commandfor="confirm" command="close" data-result="ok">OK</button>
//   <button commandfor="confirm" command="close" data-result="cancel">Abbrechen</button>
// </dialog>

const dialog = document.getElementById("confirm");

dialog.addEventListener("command", (event) => {
  if (event.command !== "close") return;
  const result = event.source?.dataset.result ?? "unbekannt";
  console.log("Dialog geschlossen mit:", result);
});

Dialog geschlossen mit: ok

Synthetisches CommandEvent mit source erzeugen

const target = document.createElement("div");
const button = document.createElement("button");
button.id = "trigger";

target.addEventListener("command", (e) => {
  console.log(e.command, e.source?.id ?? null);
});

target.dispatchEvent(new CommandEvent("command", { command: "--refresh", source: button }));
target.dispatchEvent(new CommandEvent("command", { command: "--refresh" }));

--refresh trigger --refresh null

// Wichtig · Fallstricke

Nicht mit target verwechseln: event.target ist das gesteuerte Element (commandfor-Ziel), event.source ist der Auslöser.
Retargeting im Shadow DOM: Liegt der Button in einem anderen Shadow-Tree als der Listener, wird source passend umgeleitet (meist auf den Shadow-Host). Du bekommst dann nicht zwingend den eigentlichen Button zurück.
Bei synthetischen Events kann source null sein. Nutze deshalb optionale Verkettung (event.source?.…).
Kompatibilität: Die Invoker Commands API ist neu (Chromium 135+, Firefox 144+, Safari 26+). Prüfe die Unterstützung mit "CommandEvent" in window oder "commandForElement" in HTMLButtonElement.prototype und sieh für ältere Browser einen Fallback per click-Listener vor.
Eigene Befehle müssen mit -- beginnen, sonst werden sie ignoriert.

Siehe auch

Event.target CommandEvent.command ContactAddress.country MessageEvent.source ToggleEvent.source