Window: sự kiện focus
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.
The focus event fires when an element has received focus.
The opposite of focus is blur.
This event is not cancelable and does not bubble.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập thuộc tính trình xử lý sự kiện.
addEventListener("focus", (event) => { })
onfocus = (event) => { }
Kiểu sự kiện
A FocusEvent. Inherits from UIEvent and Event.
Event properties
This interface also inherits properties from its parent UIEvent, and indirectly from Event.
-
An
EventTargetrepresenting a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set tonullfor security reasons.
Ví dụ
Live example
This example changes the appearance of a document when it loses focus. It uses addEventListener() to monitor focus and blur events.
HTML
<p id="log">Click on this document to give it focus.</p>
CSS
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
const log = document.getElementById("log");
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.";
}
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
Result
Đặc tả kỹ thuật
| Specification |
|---|
| UI Events # event-type-focus |
| HTML # handler-onfocus |