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

js
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
# handler-onblur

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

相关的事件