JS事件之事件类型[焦点事件]

17-06-28 来源：[db:作者]

收藏我要投稿

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

blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它； DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡，只有Opera支持这个事件；DOM3级事件废弃了DOMFocusIn，选择了focusin; DOMFocusOut：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本，只有Opera支持这个事件；DOM3级事件废弃了DOMFocusOut，选择了focusout; focus：在元素获得焦点时触发。这个事件不会冒泡，所有浏览器都支持它； focusin：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡，支持这个事件的浏览器有IE5+ safari5.1+ Opera11.5+ 和 Chrome; focusout: 在元素获得失去时触发。这个事件是HTML事件blur的通用版本，，支持这个事件的浏览器有IE5+ safari5.1+ Opera11.5+ 和 Chrome;

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

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

focusout 在失去焦点的元素上触发； focusin 在获得焦点的元素上触发； blur 在失去焦点的元素上触发; DOMFocusOut 在焦点的元素上触发 ; focus 在获得焦点的元素上触发； DOMFoucsIn 在获得焦点的元素上触发；

其中，blur DOMFoucsOut和focusout的事件目标是失去焦点的元素；而focus DOMFocusIn和focusin的事件目标是获得焦点的元素；

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

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

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

点击复制链接与好友分享!回本站首页