blur (event)

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

规范

DOM L3

接口

FocusEvent

是否冒泡

否

可取消默认行为

否

目标对象

元素（Element）

默认行为

无

有两种方法来为这个事件实现事件代理：在支持 focusout 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 addEventListener 方法的第三个参数 "useCapture" 为 true：

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

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

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

• focus (en-US)
• blur (en-US)
• focusin (en-US)
• focusout (en-US)