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.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("focus", (event) => {});
onfocus = (event) => {};
This interface also inherits properties from its parent UIEvent
, and indirectly from Event
.
FocusEvent.relatedTarget
-
The element losing focus, if any.
HTML
<form id="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
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
<form id="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