blur (event)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。

常规信息

规范: DOM L3
接口: FocusEvent
是否冒泡: 否
可取消默认行为: 否
目标对象: 元素（Element）
默认行为: 无

备注： Document.activeElement 的值随浏览器的不同而不同（Firefox bug 452307）：IE10 把值设为焦点将要移向的对象，而 Firefox 和 Chrome 往往把值设为 body。

属性

属性	类型	描述
`target` 只读	`EventTarget`	产生该事件的对象 (DOM 树中最顶级的那个对象).
`type` 只读	`DOMString`	事件类型。
`bubbles` 只读	`Boolean`	该事件是否冒泡。
`cancelable` 只读	`Boolean`	该事件是否可取消默认行为。
`relatedTarget` 只读	`EventTarget` (DOM 元素)	无

事件代理

有两种方法来为这个事件实现事件代理：在支持 focusout 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 addEventListener 方法的第三个参数 "useCapture" 为 true：

HTML

html

<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

JavaScript

var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);

规范

Specification
UI Events # event-type-blur
HTML Standard # handler-onblur

浏览器兼容性

BCD tables only load in the browser