当元素失去焦点时,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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
blur eventChrome Full support 5Edge Full support YesFirefox Full support Yes
Full support Yes
No support ? — 24
Notes
Notes The interface for this event is Event, not FocusEvent.
IE Full support YesOpera Full support 12.1Safari Full support 5.1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support 12.1Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

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

参见

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

文档标签和贡献者

此页面的贡献者: zhangchen, mozzix
最后编辑者: zhangchen,