focus、focusin、blur、focusout的区别

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

焦点事件：

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

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

区别：

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

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

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

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

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

原文链接：https://blog.csdn.net/TalonZhang/article/details/84298330