js事件类型中的异类一焦点事件

836 阅读1分钟

前言

有些鸟是不会飞的,有些事件是不会冒泡的。 -- 佚名

焦点事件

焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合,可以知晓用户在页面上的行踪,有以下6个焦点事件。

  • blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
  • DOMFocusIn: 只有opera支持
  • DOMFocusOut: 只有opera支持
  • focus:在元素获得焦点时触发,不会冒泡
  • focusin:在元素获得焦点时触发,与focus等价,但是会冒泡
  • focusout: 在元素失去焦点时触发

这一类事件中最主要的两个是focus和blur,它们都是javscript早期就得到所有浏览器支持的事件。这些事件的最大问题是不冒泡。因此,IE的focusin和focusout与Opera的DOMFocusIn和DOMFocusOut才会重叠。IE的方式最后被DOM3级事件采纳为标准方式。

当焦点从页面中的一个元素移动到另一个元素,会依次触发下列事件:

  • focusout在失去焦点的元素上触发
  • focusin在获得焦点的元素上触发
  • blur在失去焦点的元素上触发
  • DOMFocusOut在失去焦点的元素上触发
  • focus在获得焦点的元素上触发
  • DOMFocusIn在获得焦点的元素上触发 其中,blur、DOMFocusOut和focusout的事件目标是失去焦点的元素;而focus、DOMFocusIn和focusin的事件目标是获得焦点的元素。

即使focus和blur不冒泡,也可以在捕获阶段侦听它们。

下面演示全局侦听blur和focus