blur (event)

当一个元素失去焦点的时候 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