浅谈JavaScript的事件(事件类型)
Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息。DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发;焦点事件,元素获得或失去焦点触发;鼠标事件,用户通过鼠标在页面上执行操作时触发;滚轮事件,使用鼠标滚轮时触发;文本事件,当在文档中输入文本时触发;键盘事件,用户通过键盘在页面上操作触发;合成事件,当为IME输入字符时触发;变动事件,底层DOM结构发生变化时触发。
- UI事件
UI事件的触发并不一定是由用户操作触发的,包括:load,页面完全加载后在window上触发该事件、当所有框架都加载完毕时触发、当图片加载完毕时在img上触发、当嵌入的元素加载完成时在object上面触发;unload事件,当页面完全卸载后在window上面触发、当所有框架都卸载完成时在框架集上触发、当嵌入的内容卸载完毕后在object上触发;abort事件,在用户停止下载过程时,如果嵌入的内容未加载完成,则在object上面触发;error事件,当发生JavaScript脚本错误时触发,当无法加载图像时,在img元素上触发,当无法加载嵌入内容时在object上触发,当框架无法加载时触发;select事件,当用户选择文本框的内容时触发;resize事件,当浏览器窗口大小改变时触发;scroll事件,当用户滚动带滚动条的元素时触发。
EventUtil.addEvent(window,"load",function(){
console.log(document.getElementById("aa").innerHTML);//222 });
上面的代码添加了load事件,当页面加载完成后就会触发该事件。使用load事件能够确保事件是在页面元素加载完成后触发,不活出现错误。如果我们在页面元素位加载完成,就去获取页面上的元素,则会产生错误。
var img=document.getElementById("imgtest");
EventUtil.addEvent(img,"load",function(event){
event=EventUtil.getEvent(event); console.log(event.currentTarget.src);
});
上面的代码在img的图片加载完成后,会触发load事件,在load事件中,我们获取了event对象,并通过event对象的属性currentTarget取得了事件处理程序操作的元素。
var sc = document.createElement("script");
sc.src="js/checkboxdemo.js";
EventUtil.addEvent(sc,"load",function(event){
console.log("loaded");
});
document.head.appendChild(sc);
上面的代码,动态向head添加脚本文件,并且绑定了load事件。
unload事件是与load事件对立的一个事件,这个事件在完全卸载后触发。当用户从一个页面切换到另一个页面就会触发该事件。需要注意的是,在unload事件中不能dom元素进行操作,因为当unload事件执行的时候,所有的页面元素都已经不存在。
当浏览器大小发生改变的时候会触发resize事件。
EventUtil.addEvent(window,"resize",function(event){
alert("resize");
});
需要注意的是不要再resize中添加大量的计算代码,因为在浏览器窗口改变的时候,resize事件会被频繁的触发,会影响浏览器的性能。
- 焦点事件
焦点事件会在页面获得或失去焦点时触发。利用这些事件,并于document.hasFocus()方法和document.activeElement属性配合,可以知晓用户在页面上的行为。有6个焦点事件:blur事件,元素失去焦点时触发事件,不会冒泡;focus事件,元素获得焦点时触发,不会冒泡;focusin事件,元素获得焦点时触发,会冒泡;focusout事件,元素失去焦点时触发,会冒泡。当用户在页面上由一个元素移动到另一个元素事件触发的顺序为:focusout事件,在失去焦点的元素上触发;focusin事件,在获得焦点的元素上触发;blur事件,在失去焦点的元素上触发;focus事件,在获得焦点的元素上触发。
- 鼠标与滚轮事件
鼠标事件是WEB开发中最常用的事件。DOM3级中定义了9个鼠标事件:click事件,用户单击鼠标左键触发的事件或者按下enter键触发;dbclick事件,用户双击鼠标左键的时候触发;mousedown事件,用户按下鼠标按钮时触发;mouseenter事件,用户光标从元素外部首次移动到元素范围之内触发。这个事件不冒泡,而且光标在移动到后代元素上不会触发;mouseleave事件,在位于元素上方的事件移动到元素范围之外时触发;mousemove事件,鼠标在元素内部移动时重复重复;mouseout事件,在鼠标指针位于一个元素上方然后用于将其移入另一个元素时触发;mouseover事件,鼠标位于元素外部,然后用户首次将其移入元素内部触发;mouseup事件,释放鼠标时触发。
只有在同一个元素上触发mousedown和mouseup事件,才会触发click事件。只有触发两次click事件,才会触发dbclick事件。
var img=document.getElementById("imgtest");
EventUtil.addEvent(img,"mousedown",function(event){
console.log(event.type);
});
EventUtil.addEvent(img,"mouseup",function(event){
console.log(event.type);
});
EventUtil.addEvent(img,"click",function(event){
console.log(event.type);
});
EventUtil.addEvent(img,"dblclick",function(event){
console.log(event.type);
});
上面的代码在img上注册了mousedown、mouseup、click、dblclick事件。当双击img的时候,依次输出:mousedown、mouseup、click、mousedown、mouseup、click、dblclick。
鼠标滚轮事件就是mousewheel事件,这个事件跟踪鼠标滚轮。
EventUtil.addEvent(document.getElementById("imgtest"),"mousemove",function(event){
event=EventUtil.getEvent();
var pageX=event.pageX,
pageY=event.pageY;
if(!event.pageX){
pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
}
if(!pageY){
pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
}
console.log(pageX+","+pageY);
})
上面的代码能够实时显示鼠标的页面位置信息。即使有了滚动条,依然能够正确计算。
- 键盘与文本事件
用户在使用键盘时会触发键盘事件,有3个事件:keydown事件,当用户按下键盘上任意键时触发,如果按住不放会重复触发此事件;keypress事件,当用户按下键盘上的字符键时触发,如果按住不放会重复触发此事件;keyup事件,当释放键盘上的键时触发。
用户按下键盘上的字符键时,首先会触发keydown事件,然后是keypress事件,最后触发keyup事件。其中keydown和keypress是在文本框发生变化之前触发,keyup是在文本框变化之后触发。如果按下的是非字符集,则会触发keydown和keyup事件。
在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。对数字字母字符集,keyCode的属性值与ASCII码中的小写字母或数字的编码相同。
EventUtil.addEvent(document.getElementById("inputtext"),"keyup",function(event){
event=EventUtil.getEvent(event);
console.log(event.keyCode);
})
- 复合事件
复合事件是DOM3级中新增加的一类事件,用于处理IME的输入序列。IME可以让用户输入在键盘上找不到的字符。IME通常需要同时多个字符来确定一个字符,比如中文的输入。包括3个事件:compositionstart事件,IME打开时触发,表示要输入了;compositionupdate事件,插入新字符时触发;compositionend事件,在IME复合系统关闭时触发,返回正常输入状态。
var textbox=document.getElementById("inputtext");
EventUtil.addEvent(textbox,"compositionstart",function(event){
event=EventUtil.getEvent(event);
console.log(event.data);
});
EventUtil.addEvent(textbox,"compositionupdate",function(event){
event=EventUtil.getEvent(event);
console.log(event.data);
});
EventUtil.addEvent(textbox,"compositionend",function(event){
event=EventUtil.getEvent(event);
console.log(event.data);
});
浅谈JavaScript的事件(事件类型)的更多相关文章
- 浅谈JavaScript中的事件
引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...
- 浅谈javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...
- 浅谈Javascript单线程和事件循环
单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- js闭包的真正理解
<高级程序设计>上,这样说:当在函数内部定义了其他函数时候,就创建了闭包.闭包有权访问包含函数内部的所有变量. 这个说的太晦涩了,而且我觉得很容易理解错,闭包就是一个嵌套函数嘛?但是我觉得 ...
- Oracle忘记密码如何重
---恢复内容开始--- 昨天安装Oracle11g R2的时候给scott用户设置密码,当时没有显示而且还只以输入一次,可能密码输入错误,结果今天用scott用户登录果然密码不对,还好sys和sys ...
- [国嵌攻略][161][USB总线介绍]
USB发展史 USB(universal serial bus),通用串行总线,是一种外部总线标准.用于规范电脑与外部设备的连接和通讯.USB是在1994年底由英特尔.康柏.IBM.Microsoft ...
- python 实现词云
拿现在比较火的小说<大主宰>做测试,看看其中的关键词词云是啥 代码 import matplotlib.pyplot as plt from wordcloud import WordCl ...
- Linux - ubuntu读取/root/.profile时发现错误:mesg:ttyname fa
启动ubuntu,以root用户登陆,打开命令行终端 输入命令:#vim /root/.profile 找到.profile文件中的mesg n 将其替换成tty -s && mesg ...
- Mysql覆盖索引 covering index 或者 index coverage
组合索引 提到组合索引,大家都知道"最左前缀"原则.例如,创建索引 idx_name_age (name,age) ,通常情况下,where age=50 或者 where age ...
- MySQLdb 部署
1.windows 下载后,直接安装即可 http://www.jb51.net/softs/73369.html#download 双击安装 MySQL-python-1.2.3.win32-py2 ...
- python_11_字符编码
什么是字符编码? --世界上有很多国家,每个国家都有自己独特的语言,所以在计算机普及的当今世界, 每个国家都有自己的字符编码,本国的软件运行在其他国家的机器上,会出现乱码, 有utf-8,gbk等各种 ...
- python_如何通过实例方法名字调用方法?
案例: 某项目中,我们的代码使用的2个不同库中的图形类: Circle,Triangle 这两个类中都有一个获取面积的方法接口,但是接口的名字不一样 需求: 统一这些接口,不关心具体的接口,只要我调用 ...
- python 爬取B站视频弹幕信息
获取B站视频弹幕,相对来说很简单,需要用到的知识点有requests.re两个库.requests用来获得网页信息,re正则匹配获取你需要的信息,当然还有其他的方法,例如Xpath.进入你所观看的视频 ...