JS事件之事件类型[焦点事件]
2017-06-28 08:05
148 查看
焦点事件会在页面获得或失去焦点时触发。利用这些事件并与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的方式最后被DOM3级事件采纳为标准 方式。
当焦点从页面中的一个元素移动到另一个元素,会依次触发下列事件:
focusout 在失去焦点的元素上触发;
focusin 在获得焦点的元素上触发;
blur 在失去焦点的元素上触发;
DOMFocusOut 在焦点的元素上触发 ;
focus 在获得焦点的元素上触发;
DOMFoucsIn 在获得焦点的元素上触发;
其中,blur DOMFoucsOut和focusout的事件目标是失去焦点的元素;而focus DOMFocusIn和focusin的事件 目标是获得焦点的元素;
在确定浏览器是否支持这些事件,可以使用如下代码:
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的方式最后被DOM3级事件采纳为标准 方式。
当焦点从页面中的一个元素移动到另一个元素,会依次触发下列事件:
focusout 在失去焦点的元素上触发;
focusin 在获得焦点的元素上触发;
blur 在失去焦点的元素上触发;
DOMFocusOut 在焦点的元素上触发 ;
focus 在获得焦点的元素上触发;
DOMFoucsIn 在获得焦点的元素上触发;
其中,blur DOMFoucsOut和focusout的事件目标是失去焦点的元素;而focus DOMFocusIn和focusin的事件 目标是获得焦点的元素;
在确定浏览器是否支持这些事件,可以使用如下代码:
var isSupported = document.implementation.hasFeature('FocusEvent', '3.0');
即使focus和blur不冒泡,也可以在捕获阶段侦听到它们
相关文章推荐
- js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
- 收藏《JS 事件类型及属性》
- js 滚轮事件 滚轮焦点图(轮播图)
- JS获取回车事件和文本焦点处理不同按钮提交信息
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- JS焦点事件
- JavaScript事件学习小结(五)js中事件类型之鼠标事件
- JS事件类型详解
- 实用JS系列——事件类型
- JS-事件类型(鼠标事件中event对象的独有属性)
- [网络收集]给radio类型的INPUT添加客户端脚本 --附加实现JS来禁用onClick事件思路代码
- js获得焦点控件&获得键盘事件
- js 文本框焦点事件
- js事件类型及处理
- 原生js--事件类型
- 失去焦点和获得焦点发生事件(js)
- js中的焦点事件问题
- showModalDialog 访问父窗口,向父窗口返回值及undefined类型判断,js触发服务器控件事件
- JS一起学02:函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
- 原生js--事件类型