UI Events

Das UI Events API definiert ein System zur Handhabung von Benutzerinteraktionen wie Maus- und Tastatureingaben. Dies umfasst:

• Ereignisse, die bei bestimmten Benutzeraktionen wie Tastendrücken oder Mausklicks ausgelöst werden. Die meisten dieser Ereignisse werden auf der Element-Schnittstelle ausgelöst, aber die Ereignisse, die sich auf das Laden und Entladen von Ressourcen beziehen, werden auf der Window-Schnittstelle ausgelöst.
• Ereignisschnittstellen, die in die Handler für diese Ereignisse übergeben werden. Diese Schnittstellen erben von Event und stellen zusätzliche Informationen bereit, die spezifisch für die Art der Benutzerinteraktion sind: zum Beispiel wird das KeyboardEvent in einen keydown-Ereignishandler übergeben und liefert Informationen über die gedrückte Taste.

CompositionEvent

Wird in Handler für Kompositionsereignisse übergeben. Kompositionsereignisse ermöglichen einem Benutzer, Zeichen einzugeben, die möglicherweise nicht auf der physischen Tastatur verfügbar sind.

FocusEvent

Wird in Handler für Fokussierungsereignisse übergeben, die mit Elementen verbunden sind, die Fokus erhalten oder verlieren.

InputEvent

Wird in Handler für Eingabeereignisse übergeben, die mit der Benutzereingabe verbunden sind; zum Beispiel bei Verwendung eines <input>-Elements.

KeyboardEvent

Wird in Handler für Tastendruckereignisse übergeben.

MouseEvent

Wird in Ereignishandler für Mausereignisse übergeben, einschließlich Mausbewegung, Mausüberfahren und Maustaste hoch oder runter. Beachten Sie, dass auxclick, click und dblclick Ereignisse PointerEvent-Objekte übergeben.

MouseScrollEvent Veraltet

Veraltete, nur in Firefox verfügbare, nicht standardisierte Schnittstelle für Scroll-Ereignisse. Verwenden Sie stattdessen WheelEvent.

MutationEvent Veraltet

Wird in Mutation-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 die Ereignisschnittstelle, die in bestimmte Ereignisse wie load und unload übergeben wird.

WheelEvent

Wird in den Handler für das wheel-Ereignis übergeben, das ausgelöst wird, wenn der Benutzer ein Mausrad oder eine ähnliche Benutzeroberflächenkomponente 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 Zeiger-Taste klickt.

beforeinput

Wird direkt vor der Aktualisierung des DOMs durch eine Benutzereingabe ausgelöst.

blur

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

click

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

compositionend

Wird ausgelöst, wenn ein Textkompositionssystem (wie ein Sprach-zu-Text-Prozessor) seine Sitzung beendet 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 einer Aktualisierung der data-Eigenschaft des CompositionEvent reflektiert wird.

contextmenu

Wird unmittelbar vor dem Aufrufen eines Kontextmenüs ausgelöst.

dblclick

Wird ausgelöst, wenn der Benutzer die primäre Zeiger-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 dabei ist, den Fokus zu erhalten.

focusout

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

input

Wird unmittelbar nach der Aktualisierung des DOMs durch eine Benutzereingabe ausgelöst (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, jedoch 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 innerhalb der 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 all seiner Nachkommen bewegt wird.

mousemove

Wird ausgelöst, wenn eine Maus oder ein anderes Zeigegerät über ein Element 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 Kinderressource entladen wird.

wheel

Wird ausgelöst, wenn der Benutzer ein Mausrad oder eine ähnliche Benutzeroberflächenkomponente 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 darauf zu klicken oder doppelt zu klicken.

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 erzeugen, aber keine input-Ereignisse.

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