Javascript高级编程学习笔记（62）—— 事件（6）焦点事件

Javascript高级编程学习笔记（62）—— 事件（6）焦点事件

焦点事件

焦点事件会在页面元素获得或者失去焦点时触发，利用焦点事件和 document.hasFocus() 方法配合使用

以及 document.activeElement 属性配合可以知晓用户在页面上的行踪

 

焦点事件有以下6种：

1. blur：在元素失去焦点时触发，该事件不会冒泡
2. DOMFocusIn：在元素获得焦点时触发，该事件与HTML事件 focus等价 ，但是该事件会冒泡，DOM3级规范废弃了该事件。选择了 focusin 作为实现
3. DOMFocusOut：元素失去焦点触发，也会冒泡。DOM3级废弃该事件选择了 focusout 作为实现
4. focus：元素获得焦点触发，该事件不会冒泡
5. focusin：与focus等价支持冒泡
6. focusout：与blur等价支持冒泡

 

所以当焦点从一个元素移到另一个元素会依次触发以下事件：

1. focusout 失去焦点的元素触发
2. focusin  获得焦点的元素触发
3. blur  失去焦点的元素触发
4. DOMFocusOut 失去焦点元素触发
5. focus 获得焦点元素触发
6. DOMFocusIn 获得焦点元素触发

 

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

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

 

posted @ 2019-02-13 09:14 巽秋 阅读( ...) 评论( ...) 编辑 收藏