Element: 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.
Thefocus event fires when an element has received focus. The event does not bubble, but the relatedfocusin event that follows does bubble.
The opposite offocus is theblur event, which fires when the element haslost focus.
Thefocus event is not cancelable.
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.relatedTargetThe element losing focus, if any.
Examples
Simple example
HTML
<form> <label> Some text: <input type="text" placeholder="text input" /> </label> <label> Password: <input type="password" placeholder="password" /> </label></form>JavaScript
const password = document.querySelector('input[type="password"]');password.addEventListener("focus", (event) => { event.target.style.background = "pink";});password.addEventListener("blur", (event) => { event.target.style.background = "";});Result
Event delegation
There are two ways of implementing event delegation for this event: by using thefocusin event, or by setting theuseCapture parameter ofaddEventListener() totrue.
HTML
<form> <label> Some text: <input type="text" placeholder="text input" /> </label> <label> Password: <input type="password" placeholder="password" /> </label></form>JavaScript
const form = document.getElementById("form");form.addEventListener( "focus", (event) => { event.target.style.background = "pink"; }, true,);form.addEventListener( "blur", (event) => { event.target.style.background = ""; }, true,);Result
Specifications
| Specification |
|---|
| UI Events # event-type-focus |
| HTML # handler-onfocus |
Browser compatibility
See also
- The
HTMLElement.focus()method - Related events:
blur,focusin,focusout - This event on
Windowtargets:focusevent - Focusing: focus/blur