此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

blur (event)

基线
广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

常规信息

规范

DOM L3

接口
FocusEvent
是否冒泡

否

可取消默认行为

否

目标对象

元素(Element)

默认行为

无

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

属性

属性 类型 描述
target 只读 EventTarget 产生该事件的对象 (DOM 树中最顶级的那个对象).
type 只读 String 事件类型。
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,
);

规范

规范
UI Events
# event-type-blur
HTML
# handler-onblur

浏览器兼容性

相关的事件