JavaScript焦点事件（blur、focus与focusin、focusout的区别，焦点事件触发顺序）

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

焦点事件：

• blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持
• focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持
• focusin：在元素获得焦点时触发，与 HTML 事件 focus 等价，但它冒泡。
• focusout：在元素失去焦点时触发。与 HTML 事件 blur 等价，冒泡

在以上四个事件中，blur 和 focus 是平常非常熟悉的，但是这两个事件的问题是它们并不冒泡，因此 IE 的 focusin 和 focusout 事件被 DOM3 级事件纳为标准方式。

blur、focus 和 focusin、focusout 的区别就是：

blur、focus 不支持冒泡，focusin、focusout 支持冒泡。

当焦点从页面的一个元素移动到另一个元素时，事件的触发顺序：

1. focusout 在失去焦点的元素上触发
2. focusin 在获得焦点的元素上触发
3. blur 在失去焦点的元素上触发
4. focus 在获得焦点的元素上触发

要确定浏览器是否支持这些事件，可以使用如下代码：

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");