42、网页事件类型全解析

网页事件类型全解析

1. 焦点事件

焦点事件在页面元素获得或失去焦点时触发，它们与 document.hasFocus() 和 document.activeElement 属性协同工作，帮助我们了解用户在页面上的导航方式。主要的焦点事件有以下六种：
| 事件名称 | 触发条件 | 冒泡情况 | 支持浏览器 |
| ---- | ---- | ---- | ---- |
| blur | 元素失去焦点时触发 | 不冒泡 | 所有浏览器 |
| DOMFocusIn | 元素获得焦点时触发，是 focus 事件的冒泡版本 | 冒泡 | Opera |
| DOMFocusOut | 元素失去焦点时触发，是 blur 事件的通用版本 | 冒泡 | Opera |
| focus | 元素获得焦点时触发 | 不冒泡 | 所有浏览器 |
| focusin | 元素获得焦点时触发，是 focus 事件的冒泡版本 | 冒泡 | Internet Explorer 5.5+、Safari 5.1+、Opera 11.5+、Chrome |
| focusout | 元素失去焦点时触发，是 blur 事件的通用版本 | 冒泡 | Internet Explorer 5.5+、Safari 5.1+、Opera 11.5+、Chrome |

焦点和 blur 是最主要的两个焦点事件，自 JavaScript 早期起就被浏览器支持。但它们的一个主要问题是不冒泡，这导致 Internet Explorer 引入了 focusin 和 focusout，Opera 引入了 DOMFo