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.
Thuộc tính focus 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.
Cú pháp
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("focus", (event) => { })
onfocus = (event) => { }
Event type
Một FocusEvent. Inherits from UIEvent and Event.
Event properties
This interface also inherits properties from its parent UIEvent, and indirectly from Event.
-
The element losing focus, if any.
Ví dụ
Simple example
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
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
<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
Đặc tả kỹ thuật
| Specification |
|---|
| UI Events # event-type-focus |
| HTML # handler-onfocus |
Trình duyệt hỗ trợ
Xem thêm
- The
HTMLElement.focus()method - Related events:
blur,focusin,focusout - This event on
Windowtargets:focusevent - Focusing: focus/blur