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

时间:2024-08-11 09:35:14

焦点事件

焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 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");