Window: focus Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das focus-Event wird ausgelöst, wenn ein Element den Fokus erhält.

Das Gegenteil von focus ist blur.

Dieses Ereignis ist nicht abbruchfähig und wird nicht gebubbled.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("focus", (event) => {});

onfocus = (event) => {};

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil UIEvent und indirekt von Event.

FocusEvent.relatedTarget

Ein EventTarget, das ein sekundäres Ziel für dieses Ereignis darstellt. In einigen Fällen (z. B. beim Wechseln zwischen Seiten) kann diese Eigenschaft aus Sicherheitsgründen auf null gesetzt sein.

Beispiele

Live-Beispiel

Dieses Beispiel ändert das Erscheinungsbild eines Dokuments, wenn es den Fokus verliert. Es verwendet addEventListener() zur Überwachung der focus- und blur-Ereignisse.

HTML

html
<p id="log">Click on this document to give it focus.</p>

CSS

css
.paused {
  background: #ddd;
  color: #555;
}

JavaScript

js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-focus
HTML
# handler-onfocus

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch

  • Verwandtes Ereignis: blur
  • Dieses Ereignis auf Element-Zielen: focus Ereignis