new SubmitEvent() — Methode · JavaScript-Referenz

Signatur

new SubmitEvent(type, eventInitDict)

Beschreibung

Mit dem Konstruktor SubmitEvent() legst du ein Ereignisobjekt vom Typ SubmitEvent an. Im Unterschied zu einem einfachen Event hat es die Eigenschaft submitter. Sie verweist auf das Element, das das Absenden ausgelöst hat, zum Beispiel einen bestimmten <button type="submit">.

Brauchen wirst du den Konstruktor vor allem in Tests, zum Beispiel mit Jest/jsdom oder Playwright, und für synthetische Ereignisse: Damit prüfst du Handler, die auf event.submitter reagieren, ohne dass ein Nutzer wirklich klickt. Der Browser selbst erzeugt ein SubmitEvent automatisch, wenn ein Formular abgeschickt wird.

Wichtig: Ein mit dispatchEvent() ausgelöstes SubmitEvent schickt das Formular nicht ab. Es ruft nur die registrierten Listener auf. Soll das Formular wirklich abgeschickt werden (mit Validierung und echtem Ereignis), nimm form.requestSubmit(submitter).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, in der Praxis fast immer `"submit"`. Groß- und Kleinschreibung werden unterschieden.
$eventInitDict	object	{}	Optionales Konfigurationsobjekt. Es erbt von `EventInit` und akzeptiert daher `bubbles`, `cancelable` und `composed` (jeweils Standard `false`). Dazu kommt `submitter`: ein `HTMLElement` oder `null` (Standard `null`), also das Element, das das Absenden ausgelöst hat.

Rückgabewert

Typ

SubmitEvent

Beschreibung

Ein neues SubmitEvent-Objekt mit den übergebenen Einstellungen. isTrusted ist dabei immer false.

Beispiele

SubmitEvent erzeugen und submitter auslesen

const button = document.createElement('button');
button.name = 'aktion';
button.value = 'speichern';

const event = new SubmitEvent('submit', {
  bubbles: true,
  cancelable: true,
  submitter: button
});

console.log(event.type);            // Ereignistyp
console.log(event.submitter.value); // auslösender Button
console.log(event.isTrusted);       // synthetisch

submit speichern false

Handler mit mehreren Submit-Buttons testen

const form = document.createElement('form');
form.innerHTML = `
  <button type="submit" name="aktion" value="entwurf">Entwurf</button>
  <button type="submit" name="aktion" value="veroeffentlichen">Veröffentlichen</button>`;
document.body.append(form);

form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log(`Aktion: ${e.submitter?.value ?? 'unbekannt'}`);
});

const [, publishBtn] = form.querySelectorAll('button');
form.dispatchEvent(new SubmitEvent('submit', {
  bubbles: true,
  cancelable: true,
  submitter: publishBtn
}));

Aktion: veroeffentlichen

FormData samt Submitter-Wert erfassen

const form = document.createElement('form');
form.innerHTML = `
  <input name="titel" value="Hallo Welt">
  <button type="submit" name="aktion" value="senden">Senden</button>`;
document.body.append(form);

form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Zweites Argument von FormData nimmt den Submitter mit auf
  const data = new FormData(form, e.submitter);
  console.log(Object.fromEntries(data));
});

form.dispatchEvent(new SubmitEvent('submit', {
  cancelable: true,
  submitter: form.querySelector('button')
}));

{ titel: 'Hallo Welt', aktion: 'senden' }

// Wichtig · Fallstricke

Kein echtes Absenden: dispatchEvent(new SubmitEvent(...)) ruft nur die Listener auf. Es findet weder eine Navigation noch eine Constraint-Validierung statt. Für ein echtes Absenden nimm form.requestSubmit(button).
Standardwerte: bubbles und cancelable sind standardmäßig false. Ohne bubbles: true erreichen delegierte Listener auf übergeordneten Elementen das Ereignis nicht. Ohne cancelable: true bewirkt preventDefault() nichts.
Typprüfung: submitter muss ein HTMLElement oder null sein, sonst wirft der Konstruktor einen TypeError.
Kompatibilität: Unterstützt ab Chrome/Edge 81, Firefox 75 und Safari 15.4. Ältere Safari-Versionen kennen SubmitEvent nicht und liefern im submit-Handler ein normales Event ohne submitter. Prüfe das mit typeof SubmitEvent !== 'undefined'. In jsdom (Jest) ist SubmitEvent je nach Version unter Umständen nicht vorhanden.
Synthetische Ereignisse haben isTrusted === false. Sicherheitsrelevanter Code sollte sich darauf nicht als Nutzeraktion verlassen.

Siehe auch

SubmitEvent SubmitEvent.submitter HTMLFormElement.prototype.requestSubmit() EventTarget.prototype.dispatchEvent() new UIEvent()