第56节事件类型EventType [复制链接]

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

事件有很多类型，不同的事件类型具有不同的信息；

DOM2级事件规定了下列5种事件：

UIEvent（userInterface，用户界面）事件，在用户与页面上的元素交互时触发；MouseEvent鼠标事件，当用户通过鼠标在页面上执行操作时触发；KeyboardEvent键盘事件：通过键盘在页面上执行操作时触发；HTML事件：当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发；MutationEvent变动事件：当底层DOM结构发生变化时触发；

DOM3级在DOM2的基础上重新定义了这些事件，并增加了一些事件：

FocusEvent焦点事件：当元素获得或失去焦点时触发；WheelEvent滚轮事件：当使用鼠标滚轮（或类似设备）时触发；文本事件：当在文本中输入文本时触发；合成事件：当为IME（InputMethodEditor，输入法编辑器）输入字符时触发；

HTML5规范也定义了大量的事件：历史管理、拖放、跨文本通信，以及多媒体等事件；

除了这些事件，有些浏览器会在DOM和BOM中也实现其他专有事件；

从另外一个角度来分，事件大致可以分成几大类：

依赖于设备的输入型事件：这些事件依赖于特定的输入设备，比如鼠标和键盘，也包括触摸事件；例如，mousedown、mousemove之类的，只能通过鼠标设备，而keydown或keypss只能通过键盘设备，touchmove或gestuchange也只能通过触摸设备实现；

独立于设备的输入型事件：不依赖于特定的输入设备，比如click事件，既可以通过鼠标单击实现，也可以通过键盘或触摸设备实现；再如textinput事件，即可以通过键盘按键实现，也可以在剪切和粘贴实现，甚至通过手写设备来实现；

用户界面事件：通常指的是一些注册在表单控件上的事件，例如文本框获取焦点的focus事件，控件改变值的change事件或提交表单的submit事件；

状态变化事件：表示某些生命周期或相关状态的变化的事件，比如，文档加载的load事件或DOMContentLoaded事件或文档状态adystatechange事件；再如HTML5的历史管理的popstate事件，online或offline事件；

特定API事件：HTML5及相关的规范中定义的事件，例如：拖放事件，多媒体的相关事件；

UIEvent事件：

UIEvent事件表示简单的用户界面事件，但包含一些不一定与用户操作有关的事件，主要与元素的焦点有关；

该事件类继承自Event类；由其也派生出其他子类，如MouseEvent、TouchEvent、FocusEvent、KeyboradEvent、WheelEvent、InputEvent和CompositionEvent；

其自身定义了一些属性，如：detail、layerX、layerY、pageX、pageY、sourceCapabilities、view和which；

UIEvent相关的事件：

DOMActive：表示元素已经被用户操作（通过鼠标或键盘）激活时发生；load：当页面完全加载后在window上触发，当所有框架都加载完毕时在框架集上触发，当图像加载完毕时在img元素上触发，或者当嵌入的内容加载完成时在object元素上触发；unload：当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，或者当嵌入的内容卸载完毕后在object元素上面触发；abort：当用户停止下载过程时，如果嵌入的内容没有加载完，则在object元素上触发；error：当发生Javascript错误时在window上触发，当无法加载图像时在img元素上面触发，当无法加载嵌入内容时在object元素上触发，或者当一或多个框架无法加载时在框架集上触发；select：当用户选择文本框（input或textaa）中的一或多个字符时触发；size：当窗口或框架的大小变化时在window或框架上触发；scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发；

以上这些事件，在DOM2级事件中，除了DOMActive之外，其他事件都属于HTML事件，所以，在确定浏览器是否支持DOM2级事件，最后检测一下，如：

varisSupported=document.implementation.hasFeatu("HTMLEvents","2.0");

确定浏览器是否支持DOM3级事件，如：

varisSupported=document.implementation.hasFeatu("UIEvent","3.0");

另外，这些事件，多数与window对象或表单控件相关，所以有些地方把这些事件也称为window事件，就是因为这些事件的发生多数与浏览器窗口有关；

load加载事件：当页面完全加载后（包括所有图像、Javascript文件和CSS文件等外部资源），就会触发window对象的load事件，这也是Javascript中最常使用的事件；

有两种定义onload事件处理程序的方式：

window.addEventListener("load",function(event){console.log("Loaded");console.log(event);//Event},false);//或在IE10以下window.attachEvent("onload",function(event){console.log("Loaded");console.log(window.event);});

为body元素添加onload特性；

bodyonload="console.log(event);"

一般来说，在window上发生的任何事件都可以在body元素中通过相应的特性来指定，因为在HTML中无法访问window元素；

图像也可以触发load事件，无论是在DOM中的图像还是在HTML中的图像元素；

imgsrc="images/1.jpg"onload="alert(图片已加载)"/

或：

varimg=document.querySelector("img");img.addEventListener("load",function(event){console.log(event.target.src);});//或EventUtil.addHandler(img,"load",function(event){event=EventUtil.getEvent(event);console.log(EventUtil.getTarget(event).src);});

在创建新的img元素时，可以为其指定一个事件处理程序，只需要指定src属性就可以下载，并不需要添加到DOM树中，如：

window.addEventListener("load",function(event){varimg=document.cateElement("img");img.addEventListener("load",function(e){console.log(e.target.src);});img.src="images/1.jpg";document.body.appendChild(img);});//或者EventUtil.addHandler(window,"load",function(){varimg=document.cateElement("img");EventUtil.addHandler(img,"load",function(event){event=EventUtil.getEvent(event);console.log(EventUtil.getTarget(event).src);});img.src="images/1.jpg";document.body.appendChild(img);});

还可以使用DOM0级的Image对象实现，如：

//把varimg=document.cateElement("img");//换成varimg=newImage();

还有一些元素也以非标准的方式支持load事件；在标准浏览器中，script元素也会触发load事件，以确定动态加载的js文件是否加载完毕，在设置了script的scr属性并且添加到文档中，才会开始下载；

window.addEventListener("load",function(){varscript=document.cateElement("script");script.addEventListener("load",function(event){console.log(event.target.src);});script.src="scripts/main.js";document.getElementsByTagName("head")[0].appendChild(script);});//或EventUtil.addHandler(window,"load",function(){varscript=document.cateElement("script");EventUtil.addHandler(script,"load",function(event){console.log(event);vartarget=EventUtil.getTarget(event);console.log(target.src);});script.src="scripts/main.js";document.getElementsByTagName("head")[0].appendChild(script);});

此时，event对象的target及curntTarget或srcElement引用都是script节点；

IE8及以下浏览器不支持script元素上的load事件，但以上代码不会抛出异常；

浏览器还支持link元素上的load事件，如：

window.addEventListener("load",function(){varlink=document.cateElement("link");link.l="stylesheet";link.addEventListener("load",function(event){console.log(event.target.hf);});link.hf="styles/css.css";document.getElementsByTagName("head")[0].appendChild(link);});

与script类似，指定其hf属性并且添加到文档中才会下载；

unload事件：在页面被完全卸载后触发；或者从一个页面切换到另一个页面，或者刷新操作也会触发unload事件，如：

bodyonunload="alert(unload);"

抛出异常：blockedalertduringunload，也就是页面被阻塞了，而在unload事件处理中，是不允许阻塞的，诸如弹窗之类的，都会引起阻塞；正确的做法：

bodyonunload="console.log(unload);"

或：

EventUtil.addHandler(window,"unload",function(event){console.log("unload");});

unload事件特点：unload事件的event对象只包含target（或srcElement）属性，且值为document；unload事件发生时的状态应该是：所有资源仍存在(图片,iframe等.)对于终端用户所有资源均不可见；界面交互无效(window.open,alert,confirm等，会引起阻塞)；错误不会停止卸载文档的过程；

unload事件执行时间很短，并且是在一切都被卸载之后才触发，所以不适合处理常规代码，一般是取消（或清除）该页面上的对象引用，以避免内存泄漏；

varobj={name:"wangwei",age:18};window.addEventListener("unload",function(event){varoDiv=document.getElementById("mydiv");console.log(oDiv);varimg=document.getElementsByTagName("img")[0];console.log(img);console.log(obj);obj=null;console.log(obj);debugger;});varobj={name:"wangwei",age:18};window.addEventListener("unload",function(event){localStorage.setItem("unload","页面被unload了");localStorage.setItem("person",obj);});

示例：统计一个页面停留的时长，如：

window.addEventListener("load",function(){varstart=newDate();console.log(start);window.addEventListener("unload",function(){varend=newDate();varduration=(end.getTime()-start.getTime())/;varpageView={pageStayTimeuration,pageUrl:location.hf};console.log("保存到数据库中");});});

另外，unload事件是不冒泡的，也是不可取消的；

同样，DOM2级事件规定应该在body元素而非window对象上触发unload事件，但所有浏览器都在window上实现了unload事件；

error事件：window.onerror属性看起来像事件处理程序，并且当Javascript出错时就会触发它，但是，它并不是真正的事件处理程序，因为它的参数不是event对象，而是5个参数，由这5个参数可以获取详细的错误信息；

message：错误信息，描述错误的一条消息；URL：引发错误的Javascript所在的文档的URL；line：文档中发生错误的行数；column：发生错误的列数；error：错误对象，这个error也称为全局错误对象；

window.onerror=function(sMessage,sUrl,sLine,sColumn,error){console.log("Error:"+sMessage+"URL："+sUrl+"Line："+sLine+"Column："+sColumn);console.log(error);turntrue;}

但如果使用DOM2级事件处理程序，其中的参数就是event对象；

window.onload=function(){num1+num2;}window.addEventListener("error",function(event){console.log(event);//ErrorEventturntrue;});

ErrorEvent类继承自Event类，其定义了如下属性：

message：只读，返回包含了所发生错误的描述信息；filename：只读，包含了发生错误的脚本文本的URL；lineno：只读，错误发生的行号；colon：只读，错误发生的列号；error：只读，发生错误时所抛出的Error对象；

这5个属性也对应着window.onerror属性的5个参数；

如果是图片的onerror事件，就是一个真正的事件，其中只有一个参数，就是一个event对象；

varimg=document.getElementsByTagName("img")[0];img.onerror=function(event){console.log(event);//Eventtype为error}

abort事件：当一个资源的加载已中止时，将触发该事件；

varvideo=document.querySelector("video");videoSrc="