当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。
常规信息
- 规范
- DOM L3
- 接口
FocusEvent- 是否冒泡
- 否
- 可取消默认行为
- 否
- 目标对象
- 元素（Element）
- 默认行为
- 无
Note: The value of
Document.activeElement varies across browsers while this event is being handled (bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the body of the document.属性
| Property | Type | Description |
|---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not? |
relatedTarget 只读 |
EventTarget (DOM element) | null |
事件代理
有两种方法来为这个事件实现事件代理：在支持 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);
Browser compatibility
| 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] Prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) the interface for this event was Event, not FocusEvent. See (bug 855741).