Javascript高级编程学习笔记(62)—— 事件(6)焦点事件
焦点事件
焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用
以及 document.activeElement 属性配合可以知晓用户在页面上的行踪
焦点事件有以下6种:
- blur:在元素失去焦点时触发,该事件不会冒泡
- DOMFocusIn:在元素获得焦点时触发,该事件与HTML事件 focus等价 ,但是该事件会冒泡,DOM3级规范废弃了该事件。选择了 focusin 作为实现
- DOMFocusOut:元素失去焦点触发,也会冒泡。DOM3级废弃该事件选择了 focusout 作为实现
- focus:元素获得焦点触发,该事件不会冒泡
- focusin:与focus等价支持冒泡
- focusout:与blur等价支持冒泡
所以当焦点从一个元素移到另一个元素会依次触发以下事件:
- focusout 失去焦点的元素触发
- focusin 获得焦点的元素触发
- blur 失去焦点的元素触发
- DOMFocusOut 失去焦点元素触发
- focus 获得焦点元素触发
- DOMFocusIn 获得焦点元素触发
要确定浏览器是否支持以上事件可以使用以下代码:
var isSupported = document.implementation.hasFeature("FocusEvent","3.0");
Javascript高级编程学习笔记(62)—— 事件(6)焦点事件的更多相关文章
- Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟
事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...
- Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟
IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- Javascript高级编程学习笔记(70)—— 事件(14)内存和性能
由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- Javascript高级编程学习笔记(68)—— 事件(12)设备事件
设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...
- Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
- Javascript高级编程学习笔记(66)—— 事件(10)变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...
随机推荐
- angular 键盘事件绑定与过滤
方便的angular按钮绑定 如 <input (keyup.enter)="keyUpSearch($event)" value="按下回车键触发"&g ...
- Spring的xml配置文件中约束的必要性 找不到元素 'beans' 的声明
今天在复习Spring MVC框架的时候,只知道xml配置文件中的约束有规范书写格式的作用,所以在配置HandlerMapping对象信息的时候没有加入约束信息之后进行测试,没有遇到问题.后来在配置S ...
- Libsvm Java
在java环境下用Libsvm包解决一个多分类问题. 1.将训练数据和测试数据按照libsvm的数据格式存放 可以写程序直接构造,libsvm的数据格式如下 Label 1:value 2:value ...
- 关于Promise的记录和理解
在JavaScript中,所有的代码都是单线程执行的,这就导致了其所有的网络请求,IO操作,浏览器时间等都是异步非阻塞的模式执行的,这就使得代码的执行顺序可能会超出我们的掌控. 尤其是当多个异步操作待 ...
- c#简单的数据库查询与绑定DataGridView。
1配置文件 (两种写法) <connectionStrings> <add name="connStr" connectionString="se ...
- AX_xSession
Session xSession = new xSession(); ; xSession.userId();
- nodeJS接入微信公众平台开发
一.写在前面的话 Node.js是一个开放源代码.跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动.非阻塞和异步输入输出模型等技术来提高性能,可优化应用程 ...
- Idea如果添加Maven模块
1.要创建一个和heaton-app同级的Maven模块,如果所示 2.点击下一步,添加ArtifactId,其中 groupId : 定义了项目属于哪个组,举个例子,如果你的公司是myc ...
- CENTOS7上安装MYSQL5.7.21流程
1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...
- IntelliJ IDEA 控制台中文乱码解决方案
配置Intellij的配置文件(在idea安装目录bin目录下) 打开Intellij的根目录,找到下图的两个文件(根据你的系统是32位或64位选择其中一个配置文件),在配置文件中添加: -Dfile ...