Window: blur event

当元素失去焦点时,blur事件将触发。

与 blur 相反的是focus

Bubbles(是否支持冒泡) No
Cancelable(可撤销) No
Interface(接口) FocusEvent
Event handler property(事件处理程序属性) onblur
Sync / Async(同步/异步) Sync
Composed Yes

示例

在线示例

此示例当文档失去焦点时,更改其外观。它使用addEventListener() 去监听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. Click outside the document to lose focus.';
}

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

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

结果

规范

Specification Status Comment
UI Events Working Draft Added info that this event is composed.
Document Object Model (DOM) Level 3 Events Specification Obsolete Initial definition

浏览器兼容性

BCD tables only load in the browser

document. activeelement 的值在处理(bug 452307)时因浏览器而异 ;(bug 452307):IE10将其设置为焦点将移动到的元素,而Firefox和Chrome通常将其设置为文档的 body。

参见

  • 相关联事件: focus
  • Element 目标上的这个事件:blur 事件