Window:focus 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

focus 事件在元素獲得焦點時觸發。

focus 的反向事件是 blur

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("focus", (event) => { })

onfocus = (event) => { }

事件型別

一個 FocusEvent。繼承自 UIEventEvent

Event UIEvent FocusEvent

事件屬性

此介面還繼承了其父級 UIEvent 的屬性,以及間接繼承自 Event 的屬性。

FocusEvent.relatedTarget

一個 EventTarget,代表此事件的次要目標。在某些情況下(例如,在頁面中或頁面外進行選項卡切換時),出於安全原因,此屬性可能設定為 null

示例

即時示例

此示例在文件失去焦點時更改其外觀。它使用 addEventListener() 來監控 focusblur 事件。

HTML

html
<p id="log">Click on this document to give it focus.</p>

CSS

css
.paused {
  background: #dddddd;
  color: #555555;
}

JavaScript

js
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);

結果

規範

規範
UI 事件
# event-type-focus
HTML
# handler-onfocus

瀏覽器相容性

另見

  • 相關事件:blur
  • Element 上的此事件目標:focus 事件