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

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

浏览器兼容性

BCD tables only load in the browser

相关的事件