UI Events

Die UI-Ereignisse-API definiert ein System zur Verarbeitung von Benutzerinteraktionen wie Maus- und Tastatureingaben. Dies umfasst:

• Ereignisse, die bei bestimmten Benutzeraktionen wie Tastendruck oder Mausklick ausgelöst werden. Die meisten dieser Ereignisse treten auf dem Element-Interface auf, aber die Ereignisse, die sich auf das Laden und Entladen von Ressourcen beziehen, treten auf dem Window-Interface auf.
• Ereignis-Interfaces, die an die Handler für diese Ereignisse übergeben werden. Diese Interfaces erben von Event und bieten zusätzliche Informationen, die spezifisch für den Typ der Benutzerinteraktion sind: Zum Beispiel wird das KeyboardEvent-Objekt an einen keydown-Ereignishandler übergeben und liefert Informationen über die gedrückte Taste.

CompositionEvent

Wird an Handler für Komposition-Ereignisse übergeben. Komposition-Ereignisse ermöglichen es Benutzern, Zeichen einzugeben, die möglicherweise nicht auf der physischen Tastatur verfügbar sind.

FocusEvent

Wird an Handler für Fokus-Ereignisse übergeben, die mit dem Erhalten oder Verlieren des Fokus von Elementen verbunden sind.

InputEvent

Wird an Handler für Eingabeereignisse übergeben, die mit der Eingabe von Benutzerdaten verbunden sind; zum Beispiel beim Verwenden eines <input>-Elements.

KeyboardEvent

Wird an Handler für Tastendrücke (hoch/runter) übergeben.

MouseEvent

Wird an Ereignishandler für Mausereignisse übergeben, einschließlich Mausbewegungen, Überfahren und Verlassen sowie Drücken oder Loslassen einer Maustaste. Beachten Sie, dass auxclick, click und dblclick Ereignisse PointerEvent-Objekte übergeben.

MouseScrollEvent Veraltet

Veraltetes, nur in Firefox verfügbares, nicht standardisiertes Interface für Scroll-Ereignisse. Verwenden Sie stattdessen WheelEvent.

MutationEvent Veraltet

Wird an Mutations-Ereignishandler übergeben, die entwickelt wurden, um Benachrichtigungen über Änderungen am DOM zu ermöglichen. Jetzt veraltet: Verwenden Sie stattdessen MutationObserver.

UIEvent

Eine Basis, von der andere UI-Ereignisse erben, und auch das Ereignisinterface, das in einige Ereignisse wie load und unload übergeben wird.

WheelEvent

Wird an den Handler des wheel-Ereignisses übergeben, das ausgelöst wird, wenn der Benutzer ein Mausrad oder ein ähnliches Benutzerinterface-Komponent wie ein Touchpad dreht.

abort

Wird ausgelöst, wenn das Laden einer Ressource abgebrochen wurde (zum Beispiel, weil der Benutzer es abgebrochen hat).

auxclick

Wird ausgelöst, wenn der Benutzer die nicht-primäre Pointer-Taste klickt.

beforeinput

Wird ausgelöst, kurz bevor der DOM mit einer Benutzereingabe aktualisiert wird.

blur

Wird ausgelöst, wenn ein Element den Fokus verloren hat.

click

Wird ausgelöst, wenn der Benutzer die primäre Pointer-Taste klickt.

compositionend

Wird ausgelöst, wenn ein Textkompositionssystem (wie ein Sprach-zu-Text-Prozessor) seine Sitzung abgeschlossen hat; zum Beispiel, weil der Benutzer es geschlossen hat.

compositionstart

Wird ausgelöst, wenn der Benutzer eine neue Sitzung mit einem Textkompositionssystem begonnen hat.

compositionupdate

Wird ausgelöst, wenn ein Textkompositionssystem seinen Text mit einem neuen Zeichen aktualisiert, was in einem Update der data-Eigenschaft des CompositionEvent reflektiert wird.

contextmenu

Wird ausgelöst, kurz bevor ein Kontextmenü aufgerufen wird.

dblclick

Wird ausgelöst, wenn der Benutzer die primäre Pointer-Taste doppelklickt.

error

Wird ausgelöst, wenn eine Ressource nicht geladen werden kann oder nicht verarbeitet werden kann (zum Beispiel, wenn ein Bild ungültig ist oder ein Skript einen Fehler hat).

focus

Wird ausgelöst, wenn ein Element den Fokus erhalten hat.

focusin

Wird ausgelöst, wenn ein Element gerade dabei ist, den Fokus zu erhalten.

focusout

Wird ausgelöst, wenn ein Element gerade dabei ist, den Fokus zu verlieren.

input

Wird ausgelöst, kurz nachdem der DOM mit einer Benutzereingabe aktualisiert wurde (zum Beispiel, eine Texteingabe).

keydown

Wird ausgelöst, wenn der Benutzer eine Taste gedrückt hat.

keypress Veraltet

Wird ausgelöst, wenn der Benutzer eine Taste gedrückt hat, nur wenn die Taste einen Zeichenwert erzeugt. Verwenden Sie stattdessen keydown.

keyup

Wird ausgelöst, wenn der Benutzer eine Taste losgelassen hat.

load

Wird ausgelöst, wenn die gesamte Seite geladen wurde, einschließlich aller abhängigen Ressourcen wie Stylesheets und Bilder.

mousedown

Wird ausgelöst, wenn der Benutzer eine Taste auf einer Maus oder einem anderen Zeigegerät drückt, während der Zeiger über dem Element ist.

mouseenter

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät in die Grenze des Elements oder eines seiner Nachkommen bewegt wird.

mouseleave

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät außerhalb der Grenze des Elements und aller seiner Nachkommen bewegt wird.

mousemove

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät während des Überfahren eines Elements bewegt wird.

mouseout

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät außerhalb der Grenze des Elements bewegt wird.

mouseover

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät über ein Element bewegt wird.

mouseup

Wird ausgelöst, wenn der Benutzer eine Taste auf einer Maus oder einem anderen Zeigegerät loslässt, während der Zeiger über dem Element ist.

unload

Wird ausgelöst, wenn das Dokument oder eine untergeordnete Ressource entladen wird.

wheel

Wird ausgelöst, wenn der Benutzer ein Mausrad oder ein ähnliches Benutzerschnittstellenkomponent wie ein Touchpad dreht.

Dieses Beispiel protokolliert Mausereignisse zusammen mit den X- und Y-Koordinaten, an denen das Ereignis erzeugt wurde. Versuchen Sie, die Maus in die gelben und roten Quadrate zu bewegen und klicken oder doppelklicken Sie.

HTML

<div id="outer">
  <div id="inner"></div>
</div>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#outer {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

#inner {
  height: 100px;
  width: 100px;
  background-color: red;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

outer.addEventListener("click", (event) => {
  log(event);
});

outer.addEventListener("dblclick", (event) => {
  log(event);
});

outer.addEventListener("mouseover", (event) => {
  log(event);
});

outer.addEventListener("mouseout", (event) => {
  log(event);
});

outer.addEventListener("mouseenter", (event) => {
  log(event);
});

outer.addEventListener("mouseleave", (event) => {
  log(event);
});

function log(event) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  const line = `${event.type}(${event.clientX}, ${event.clientY})`;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Ergebnis

Dieses Beispiel protokolliert keydown, beforeinput und input Ereignisse. Versuchen Sie, in das Textfeld zu tippen. Beachten Sie, dass Tasten wie Shift keydown-Ereignisse, aber keine input-Ereignisse erzeugen.

HTML

<textarea id="story" rows="5" cols="33"></textarea>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#story {
  padding: 0.5rem;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const story = document.querySelector("#story");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

story.addEventListener("keydown", (event) => {
  log(`${event.type}(${event.key})`);
});

story.addEventListener("beforeinput", (event) => {
  log(`${event.type}(${event.data})`);
});

story.addEventListener("input", (event) => {
  log(`${event.type}(${event.data})`);
});

function log(line) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Ergebnis

• Pointer Events API
• Touch Events