常规信息
备注:Document.activeElement 的值随浏览器的不同而不同(Firefox 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
html
<form id="form">
<input type="text" placeholder="text input" />
<input type="password" placeholder="password" />
</form>
JavaScript
js
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,
);
规范
| 规范 |
|---|
| UI Events> # event-type-blur> |
| HTML> # handler-onblur> |