Konzepte und Verwendung

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 demElement-Interface auf, aber die Ereignisse, die sich auf das Laden und Entladen von Ressourcen beziehen, treten auf demWindow-Interface auf.
• Ereignis-Interfaces, die an die Handler für diese Ereignisse übergeben werden. Diese Interfaces erben vonEvent und bieten zusätzliche Informationen, die spezifisch für den Typ der Benutzerinteraktion sind: Zum Beispiel wird dasKeyboardEvent-Objekt an einenkeydown-Ereignishandler übergeben und liefert Informationen über die gedrückte Taste.

Interfaces

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, dassauxclick,click unddblclick EreignissePointerEvent-Objekte übergeben.

MouseScrollEventVeraltet

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

MutationEventVeraltet

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

UIEvent

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

WheelEvent

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

Ereignisse

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 derdata-Eigenschaft desCompositionEvent 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.

keypressVeraltet

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

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.

Beispiele

Mausereignisse

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>  <div></div></div><div>  <pre></pre>  <button>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

Tastatur- und Eingabeereignisse

Dieses Beispiel protokolliertkeydown,beforeinput undinput Ereignisse. Versuchen Sie, in das Textfeld zu tippen. Beachten Sie, dass Tasten wieShiftkeydown-Ereignisse, aber keineinput-Ereignisse erzeugen.

HTML

<textarea rows="5" cols="33"></textarea><div>  <pre></pre>  <button>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

Spezifikationen

Siehe auch

• Pointer Events API
• Touch Events