Window: blur 事件

当元素失去焦点时，会触发 **blur** 事件。

blur 的反义词是 focus。

此事件不可取消，也不冒泡。

语法

在诸如 addEventListener() 之类的使用方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("blur", (event) => {});

onblur = (event) => {};

事件类型

一个 FocusEvent。继承自 UIEvent 和 Event。

Event UIEvent FocusEvent

事件属性

此接口还继承了其父级 UIEvent 的属性，并间接继承自 Event 的属性。

FocusEvent.relatedTarget

一个表示此事件的辅助目标的 EventTarget。在某些情况下（例如，在页面中进行选项卡式浏览时），出于安全原因，此属性可能会设置为 null。

示例

示例

此示例在文档失去焦点时更改其外观。它使用 addEventListener() 来监视 focus 和 blur 事件。

HTML

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

CSS

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

JavaScript

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

结果

规范

规范
用户界面事件
# 事件类型-blur
HTML 标准
# 处理程序-onblur

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

在处理此事件时，Document.activeElement 的值在不同浏览器之间有所不同（Firefox 错误 452307）：IE10 将其设置为焦点将移动到的元素，而 Firefox 和 Chrome 通常将其设置为文档的 body。

另请参阅

  • 相关事件：focus
  • 此事件在 Element 上的目标：blur 事件