浅谈JavaScript的事件(事件类型)

  Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息。DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发;焦点事件,元素获得或失去焦点触发;鼠标事件,用户通过鼠标在页面上执行操作时触发;滚轮事件,使用鼠标滚轮时触发;文本事件,当在文档中输入文本时触发;键盘事件,用户通过键盘在页面上操作触发;合成事件,当为IME输入字符时触发;变动事件,底层DOM结构发生变化时触发。

  • UI事件

  UI事件的触发并不一定是由用户操作触发的,包括:load,页面完全加载后在window上触发该事件、当所有框架都加载完毕时触发、当图片加载完毕时在img上触发、当嵌入的元素加载完成时在object上面触发;unload事件,当页面完全卸载后在window上面触发、当所有框架都卸载完成时在框架集上触发、当嵌入的内容卸载完毕后在object上触发;abort事件,在用户停止下载过程时,如果嵌入的内容未加载完成,则在object上面触发;error事件,当发生JavaScript脚本错误时触发,当无法加载图像时,在img元素上触发,当无法加载嵌入内容时在object上触发,当框架无法加载时触发;select事件,当用户选择文本框的内容时触发;resize事件,当浏览器窗口大小改变时触发;scroll事件,当用户滚动带滚动条的元素时触发。

1 EventUtil.addEvent(window,"load",function(){
2                 console.log(document.getElementById("aa").innerHTML);//2223             });

  上面的代码添加了load事件,当页面加载完成后就会触发该事件。使用load事件能够确保事件是在页面元素加载完成后触发,不活出现错误。如果我们在页面元素位加载完成,就去获取页面上的元素,则会产生错误。

1 var img=document.getElementById("imgtest");
2             EventUtil.addEvent(img,"load",function(event){
3                 event=EventUtil.getEvent(event);4                  console.log(event.currentTarget.src);
5             });

  上面的代码在img的图片加载完成后,会触发load事件,在load事件中,我们获取了event对象,并通过event对象的属性currentTarget取得了事件处理程序操作的元素。

1 var sc = document.createElement("script");
2             sc.src="js/checkboxdemo.js";
3             EventUtil.addEvent(sc,"load",function(event){
4                 console.log("loaded");
5             });
6             document.head.appendChild(sc);

  上面的代码,动态向head添加脚本文件,并且绑定了load事件。

  unload事件是与load事件对立的一个事件,这个事件在完全卸载后触发。当用户从一个页面切换到另一个页面就会触发该事件。需要注意的是,在unload事件中不能dom元素进行操作,因为当unload事件执行的时候,所有的页面元素都已经不存在。

  当浏览器大小发生改变的时候会触发resize事件。

1 EventUtil.addEvent(window,"resize",function(event){
2                 alert("resize");
3             });

  需要注意的是不要再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事件。

 1 var img=document.getElementById("imgtest");
 2             EventUtil.addEvent(img,"mousedown",function(event){
 3                 console.log(event.type);
 4             });
 5             EventUtil.addEvent(img,"mouseup",function(event){
 6                 console.log(event.type);
 7             });
 8             EventUtil.addEvent(img,"click",function(event){
 9                 console.log(event.type);
10             });
11             EventUtil.addEvent(img,"dblclick",function(event){
12                 console.log(event.type);
13             });

  上面的代码在img上注册了mousedown、mouseup、click、dblclick事件。当双击img的时候,依次输出:mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

  鼠标滚轮事件就是mousewheel事件,这个事件跟踪鼠标滚轮。

 1 EventUtil.addEvent(document.getElementById("imgtest"),"mousemove",function(event){
 2                 event=EventUtil.getEvent();
 3                 var pageX=event.pageX,
 4                 pageY=event.pageY;
 5                 if(!event.pageX){
 6                     pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
 7                 }
 8                 if(!pageY){
 9                     pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
10                 }
11                 console.log(pageX+","+pageY);
12             })

  上面的代码能够实时显示鼠标的页面位置信息。即使有了滚动条,依然能够正确计算。

  • 键盘与文本事件

  用户在使用键盘时会触发键盘事件,有3个事件:keydown事件,当用户按下键盘上任意键时触发,如果按住不放会重复触发此事件;keypress事件,当用户按下键盘上的字符键时触发,如果按住不放会重复触发此事件;keyup事件,当释放键盘上的键时触发。

  用户按下键盘上的字符键时,首先会触发keydown事件,然后是keypress事件,最后触发keyup事件。其中keydown和keypress是在文本框发生变化之前触发,keyup是在文本框变化之后触发。如果按下的是非字符集,则会触发keydown和keyup事件。

  在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。对数字字母字符集,keyCode的属性值与ASCII码中的小写字母或数字的编码相同。

1 EventUtil.addEvent(document.getElementById("inputtext"),"keyup",function(event){
2             event=EventUtil.getEvent(event);
3             console.log(event.keyCode);
4         })
  • 复合事件

  复合事件是DOM3级中新增加的一类事件,用于处理IME的输入序列。IME可以让用户输入在键盘上找不到的字符。IME通常需要同时多个字符来确定一个字符,比如中文的输入。包括3个事件:compositionstart事件,IME打开时触发,表示要输入了;compositionupdate事件,插入新字符时触发;compositionend事件,在IME复合系统关闭时触发,返回正常输入状态。

 1 var textbox=document.getElementById("inputtext");
 2         EventUtil.addEvent(textbox,"compositionstart",function(event){
 3             event=EventUtil.getEvent(event);
 4             console.log(event.data);
 5         });
 6         EventUtil.addEvent(textbox,"compositionupdate",function(event){
 7             event=EventUtil.getEvent(event);
 8             console.log(event.data);
 9         });
10         EventUtil.addEvent(textbox,"compositionend",function(event){
11             event=EventUtil.getEvent(event);
12             console.log(event.data);
13         });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

工具 | R、Python、Scala 和 Java,到底该使用哪一种大数据编程语言?

有一个大数据项目,你知道问题领域(problem domain),也知道使用什么基础设施,甚至可能已决定使用哪种框架来处理所有这些数据,但是有一个决定迟迟未能做...

31680
来自专栏钟绍威的专栏

矩阵的基本知识构造重复矩阵的方法——repmat(xxx,xxx,xxx)构造器的构造方法单位数组的构造方法指定公差的等差数列指定项数的等差数列指定项数的lg等差数列sub2ind()从矩阵索引==》

要开始学Matlab了,不然就完不成任务了 java中有一句话叫作:万物皆对象 在matlab我想到一句话:万物皆矩阵 矩阵就是Java中的数组 ...

322100
来自专栏钟绍威的专栏

递归思想解决输出目录下的全部文件

刚刚了解了下递归思想 递归就是在方法内调用本方法 下面说一个实际的应用 输出目录下的全部文件,当目录中还有目录时,则进入目录输出里面的文件 import j...

22170
来自专栏钟绍威的专栏

初学File类

对File类的基本方法的理解 今天刚开始学了File类 一开始看思想编程看得迷迷糊糊的,之后受不了了,直接去看API文档 归纳: File->jav...

213100
来自专栏钟绍威的专栏

怎么改变按钮的图标

按钮的图标一开始很难看 所以要改 改变按钮图标的方法: javax.swing.AbstractButton中的方法 setContentAreaF...

263100
来自专栏钟绍威的专栏

怎么实现关闭窗口

思路:在java源文件中查找源代码 首先,我们知道JFrame.setDefaultCloseOperation(int operation)中提供了四种方...

51370
来自专栏钟绍威的专栏

简单的Writer和ReaderWriter的主要方法Writer工作原理Reader的主要方法readLine():String

Writer用于写出去到文件中,Reader用于将外面的文件读进来控制台 Writer和Reader有许多子类,但是子类大多都是直接运用父类Writer和R...

21950
来自专栏钟绍威的专栏

初识字节流+实现缓冲字节流OutputStream的主要方法构造方法读关流实现BufferedInputStream实现BufferedOutputStream为什么read()返回的是Int型而不是

java中的IO流可以分为两种:字符流和字节流 字符流,顾名思义,就是对字符进行操作,只能操作文本文件 字节流,就是对字节进行操作,然而所有文件都是由字...

20780
来自专栏钟绍威的专栏

在Java中如何实现“Pless presss any key to continue.”

import java.util.*; class Continue{ public static void main(String[] args){ ...

19590
来自专栏钟绍威的专栏

SequenceInputStreamSequenceInputStream构造方法读关流刷新

SequenceInputStream从名字上看, 他是一个序列字节输入流 既然是个序列 那么意味着 SequenceInputStream装着许多的输...

21680

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励