Erstellen und Auslösen von Events

Dieser Artikel zeigt, wie man DOM-Events erstellt und auslöst. Solche Events werden oft als synthetische Events bezeichnet, im Gegensatz zu den Events, die vom Browser selbst ausgelöst werden.

Erstellen von benutzerdefinierten Events

Events können mit dem Event-Konstruktor wie folgt erstellt werden:

js
const event = new Event("build");

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    /* … */
  },
  false,
);

// Dispatch the event.
elem.dispatchEvent(event);

Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().

Dieser Konstruktor wird in den meisten modernen Browsern unterstützt. Für einen ausführlicheren Ansatz siehe die altmodische Methode unten.

Hinzufügen benutzerdefinierter Daten – CustomEvent()

Um dem Event-Objekt mehr Daten hinzuzufügen, gibt es die CustomEvent-Schnittstelle, und die detail-Eigenschaft kann verwendet werden, um benutzerdefinierte Daten zu übergeben. Beispielsweise könnte das Event wie folgt erstellt werden:

js
const event = new CustomEvent("build", { detail: elem.dataset.time });

Dies ermöglicht es Ihnen dann, auf die zusätzlichen Daten im Event-Listener zuzugreifen:

js
function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}

Die altmodische Methode

Der ältere Ansatz zur Erstellung von Events verwendet von Java inspirierte APIs. Das folgende Beispiel zeigt document.createEvent():

js
// Create the event.
const event = document.createEvent("Event");

// Define that the event name is 'build'.
event.initEvent("build");

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    // e.target matches elem
  },
  false,
);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

Event-Bubbling

Es ist oft wünschenswert, ein Event von einem Kindelement auszulösen und es von einem Vorfahren abfangen zu lassen, optional mit Daten:

html
<form>
  <textarea></textarea>
</form>
js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property
const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener("awesome", (e) => console.log(e.detail.text()));

// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));

Dynamisches Erstellen und Auslösen von Events

Elemente können auf Events lauschen, die noch nicht erstellt wurden:

html
<form>
  <textarea></textarea>
</form>
js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", function () {
  // Create and dispatch/trigger an event on the fly
  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
  this.dispatchEvent(
    new CustomEvent("awesome", {
      bubbles: true,
      detail: { text: () => textarea.value },
    }),
  );
});

Auslösen von integrierten Events

Dieses Beispiel demonstriert das Simulieren eines Klicks (d. h. das programmatische Generieren eines Klick-Events) auf ein Kontrollkästchen mittels DOM-Methoden. Sehen Sie sich das Beispiel in Aktion an.

js
function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

Siehe auch