Element: focus event
The focus
event fires when an element has received focus. The event does not bubble, but the related focusin
event that follows does bubble.
The opposite of focus
is the blur
event, which fires when the element has lost focus.
The focus
event is not cancelable.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("focus", (event) => {});
onfocus = (event) => {};
Event type
A FocusEvent
. Inherits from Event
.
Event properties
Examples
Simple example
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
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 the focusin
event, or by setting the useCapture
parameter of addEventListener()
to true
.
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
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 Standard # handler-onfocus |
Browser compatibility
BCD tables only load in the browser
See also
- The
HTMLElement.focus()
method - Related events:
blur
,focusin
,focusout
- This event on
Window
targets:focus
event - Focusing: focus/blur