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);//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 取得了事件处理程序操作的元素
- 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 上注册了 mousedownmouseupclickdblclick 事件当双击 img 的时候, 依次输出: mousedownmouseupclickmousedownmouseupclickdblclick
鼠标滚轮事件就是 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);
- });
来源: https://www.cnblogs.com/ggz19/p/8444495.html