Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The focus event fires when an element has received focus. The main difference between this event and focusin is that only the latter bubbles.

Note: The opposite of focus is blur.

General info

Interface FocusEvent
Sync / Async Sync
Bubbles No
Cancelable No
Targets Window, Element
Composed Yes
Default Action None

Properties

Property Type Description
target Read only EventTarget Event target (DOM element)
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancellable or not.
relatedTarget Read only EventTarget (DOM element) null

Examples

Event delegation

There are two ways of implementing event delegation for this event: by using the focusin event, or by setting the useCapture parameter of addEventListener() to true.

See the code for this example on the blur reference page.

Window focus

This example changes the appearance of a document when it loses focus. It uses addEventListener() to monitor focus and blur events.

HTML

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

CSS

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

JavaScript

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

function play() {
  document.body.classList.remove('paused');
  log.textContent = 'This document has focus.';
}

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

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

Result

Specifications

Specification Status Comment
UI Events Working Draft Added info that this event is composed.
Document Object Model (DOM) Level 3 Events Specification Obsolete Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Yes) ? ? ? ?

The interface was Event prior to Firefox 24. (bug 855741)

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Zuletzt aktualisiert von: mfluehr,