焦点事件

焦点事件发生在元素节点和 document 对象上面，与获得或失去焦点相关。它主要包括以下四个事件。

• focus ：元素节点获得焦点后触发，该事件不会冒泡。
• blur ：元素节点失去焦点后触发，该事件不会冒泡。
• focusin ：元素节点将要获得焦点时触发，发生在 focus 事件之前。该事件会冒泡。
• focusout ：元素节点将要失去焦点时触发，发生在 blur 事件之前。该事件会冒泡。

这四个事件的事件对象都继承了 FocusEvent 接口。 FocusEvent 实例具有以下属性。

• FocusEvent.target ：事件的目标节点。
• FocusEvent.relatedTarget ：对于 focusin 事件，返回失去焦点的节点；对于 focusout 事件，返回将要接受焦点的节点；对于 focus 和 blur 事件，返回 null 。

由于 focus 和 blur 事件不会冒泡，只能在捕获阶段触发，所以 addEventListener 方法的第三个参数需要设为 true 。

form.addEventListener('focus', function (event) {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', function (event) {
  event.target.style.background = '';
}, true);

上面代码针对表单的文本输入框，接受焦点时设置背景色，失去焦点时去除背景色。