Window: focus event

BaselineWidely available

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

Thefocus event fires when an element has received focus.

The opposite offocus isblur.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("focus", (event) => { })onfocus = (event) => { }

Event type

AFocusEvent. Inherits fromUIEvent andEvent.

Event properties

This interface also inherits properties from its parentUIEvent, and indirectly fromEvent.

FocusEvent.relatedTarget: AnEventTarget representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set tonull for security reasons.

Examples

Live example

This example changes the appearance of a document when it loses focus. It usesaddEventListener() to monitorfocus andblur events.

HTML

html

<p>Click on this document to give it focus.</p>

CSS

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. Click outside the document to lose focus.";}const log = document.getElementById("log");window.addEventListener("blur", pause);window.addEventListener("focus", play);