EventTarget事件：focus

EventTarget事件 - focus

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

注意：與focus相反的是blur。

基本信息

屬性

示例

事件授權

有兩種方法可以為此事件實現(xiàn)事件授權：通過使用focusin事件或將addEventListener()的useCapture參數(shù)設置為true。

請參閱blur參考頁面上此示例的代碼。

Window focus

此示例在失去焦點時更改文檔的外觀。它使用addEventListener()來監(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ù)轉換為機器可讀的JSON格式。

• 電腦端

• 移動端
  

在Firefox 24之前該接口是Event。