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