EventTarget事件：focus

EventTarget事件 - focus

當(dāng)元素獲得焦點(diǎn)時(shí)，focus事件將觸發(fā)。這個(gè)事件和focusin之間的主要區(qū)別在于只有后者冒泡。

注意：與focus相反的是blur。

基本信息

屬性

示例

事件授權(quán)

有兩種方法可以為此事件實(shí)現(xiàn)事件授權(quán)：通過(guò)使用focusin事件或?qū)ddEventListener()的useCapture參數(shù)設(shè)置為true。

請(qǐng)參閱blur參考頁(yè)面上此示例的代碼。

Window focus

此示例在失去焦點(diǎn)時(shí)更改文檔的外觀。它使用addEventListener()來(lái)監(jiān)視focus和blur事件。

HTML

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

CSS

.paused {
  background: #ddd;
  color: #555;
}

JavaScript的

function pause() {
  document.body.classList.add('paused');
  log.textContent = 'FOCUS LOST!';
}

function play() {
  document.body.classList.remove('paused');
  log.textContent = 'This document has focus.';
}

const log = document.getElementById('log');

window.addEventListener('blur', pause);
window.addEventListener('focus', play);

規(guī)范

瀏覽器兼容性Section

我們將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端
  

在Firefox 24之前該接口是Event。