JavaScript焦点事件（blur、focus与focusin、focusout的区别，焦点事件触发顺序）
- 2025-10-04 09:06:29
焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 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 支持冒泡。
当焦点从页面的一个元素移动到另一个元素时，事件的触发顺序：
focusout 在失去焦点的元素上触发focusin 在获得焦点的元素上触发blur 在失去焦点的元素上触发focus 在获得焦点的元素上触发
要确定浏览器是否支持这些事件，可以使用如下代码：
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
