blur (event)

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

常规信息

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

Note:

Document.activeElement 的值随浏览器的不同而不同 (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 Content

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

JavaScript Content

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);

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 (Yes)[1] 6 12.1 5.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 53 ? 10.0 12.1 5.1

[1] 在 Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) 之前，事件的接口为 Event，而不是 FocusEvent。参考 (bug 855741).

相关的事件