当一个元素失去焦点的时候 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!

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

相关的事件

文档标签和贡献者

此页面的贡献者: hhxxhg, hyh19962008, fscholz, m2mbob
最后编辑者: hhxxhg,