13.4.2 焦点事件

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及
document.activeElement 属性配合，可以知晓用户在页面上的行踪。有以下6 个焦点事件。

• blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
• DOMFocusIn：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。只有Opera 支持这个事件。DOM3 级事件废弃了DOMFocusIn，选择了focusin。
• DOMFocusOut：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。只有Opera支持这个事件。DOM3 级事件废弃了DOMFocusOut，选择了focusout。
• focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
• focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。
• focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。

这一类事件中最主要的两个是focus 和blur，它们都是JavaScript 早期就得到所有浏览器支持的事件。这些事件的最大问题是它们不冒泡。因此，IE 的focusin 和focusout 与Opera 的DOMFocusIn和DOMFocusOut 才会发生重叠。IE 的方式最后被DOM3 级事件采纳为标准方式。
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

• (1) focusout 在失去焦点的元素上触发；
• (2) focusin 在获得焦点的元素上触发；
• (3) blur 在失去焦点的元素上触发；
• (4) DOMFocusOut 在失去焦点的元素上触发；
• (5) focus 在获得焦点的元素上触发；
• (6) DOMFocusIn 在获得焦点的元素上触发。

其中，blur、DOMFocusOut 和focusout 的事件目标是失去焦点的元素；而focus、DOMFocusIn和focusin 的事件目标是获得焦点的元素。
要确定浏览器是否支持这些事件，可以使用如下代码：
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

即使focus 和blur 不冒泡，也可以在捕获阶段侦听到它们。Peter-Paul Koch 就此写过一篇非常棒的文章：www.quirksmode.org/blog/archives/2008/04/delegating_the.html。