本篇文章给大家带来的内容是关于浏览器中常用的事件解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

 

　　表单事件

 

　　键盘事件

 

　　当<input>,<textarea>的值发生变化时触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。

 

　　此类事件包括:keydown,keyup,

 

　　鼠标事件

 

　　select事件当在<input>,<textarea>中选中文本时触发

 

　　change事件当<input>,<select>,<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:

 

　　激活单选框(radio)或复选框(checkbox)时触发。

 

　　用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。

 

　　当文本框或textarea元素的值发生改变，并且丧失焦点时触发。

 

　　reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。

 

　　submit事件当表单数据向服务器提交时由form元素触发。

 

　　文档事件:

 

　　beforeunload

 

　　beforeunload事件当窗口将要关闭，或者document和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了event.preventDefault()，或者对事件对象的returnValue属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:

 

　　window.addEventListener('beforeunload',function(event){

 

　　if(event.preventDefault){

 

　　event.preventDefault();

 

　　}else{

 

　　event.returnValue='你确认要离开吗？';

 

　　}

 

　　});

 

　　unload与load

 

　　unload事件在窗口关闭或者document对象将要卸载时触发，发生在window,body,frameset等对象上面。它的触发顺序排在beforeunload,pagehide事件后面。unload事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发unload事件。当unload事件发生时，document对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open,alert,confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。

 

　　load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。

 

　　这两个事件实际上属于进度事件，不仅发生在document对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image),样式表(stylesheet),脚本(script),视频(video),音频(audio),Ajax请求(XMLHttpRequest)等等。这些资源和document对象,window对象,XMLHttpRequestUpload对象，都会触发load事件和error事件。

 

　　pageshow与pagehide

 

　　pageshow事件，pagehide事件:默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。

 

　　pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行。pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。

 

　　document.onpageshow=function(event){}

 

　　if(event.persisted){

 

　　//如果存缓存加载

 

　　}

 

　　}

 

　　同样的，将这个属性设为true，就表示页面要保存在缓存中；设为false，表示网页不保存在缓存中，这时如果设置了unload事件的监听函数，该函数将在pagehide事件后立即运行。如果页面包含frame，则frame页面的pageshow事件和pagehide事件，都会在主页面之前触发。

 

　　DOMContentLoaded和readystatechange

 

　　DOMContentLoaded事件当HTML文档下载并解析完成以后，就会在document对象上触发DOMContentLoaded事件。这时，仅仅完成了HTML文档的解析(整张页面的DOM生成)，所有外部资源(样式表,脚本,iframe等等)可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多。注意，网页的JavaScript脚本是同步执行的，所以定义DOMContentLoaded事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发DOMContentLoaded事件。此外，IE8不支持DOMContentLoaded事件，可以使用readystatechange事件代替。

 

　　readystatechange事件发生在Document对象和XMLHttpRequest对象，当它的readyState属性发生变化时触发。

 

　　其他文档级事件

 

　　上面重点提到了DOMContentLoaded,readystatechange,pageshow,pagehide,unload,load和beforeunload事件，此外还有一下事件:

 

　　onafterprint:文档打印之后运行的脚本

 

　　onbeforeprint:文档打印之前运行的脚本

 

　　onbeforeunload:文档卸载之前运行的脚本(上文已涉及)

 

　　onerror:在错误发生时运行的脚本

 

　　onhaschange:当文档已改变时运行的脚本

 

　　onload:页面结束加载之后触发(上文已涉及)

 

　　onmessage:在消息被触发时运行的脚本

 

　　onoffline:当文档离线时运行的脚本

 

　　ononline:当文档上线时运行的脚本

 

　　onpagehide:当窗口隐藏时运行的脚本(上文已涉及)

 

　　onpageshow:当窗口成为可见时运行的脚本(上文已涉及)

 

　　onpopstate:当窗口历史记录改变时运行的脚本

 

　　onredo:当文档执行撤销（redo）时运行的脚本

 

　　onresize:当浏览器窗口被调整大小时触发

 

　　onstorage:在WebStorage区域更新后运行的脚本

 

　　onundo:在文档执行undo时运行的脚本

 

　　onscroll:事件在文档或文档元素滚动时执行脚本

 

　　鼠标事件与MouseEvent对象

 

　　newMouseEvent(typeArg,mouseEventInit);

 

　　内置的鼠标事件包括:

 

　　mousedown:按下鼠标

 

　　mouseup:鼠标抬起

 

　　click:点击

 

　　dblclick:双击

 

　　mousemove:鼠标移动

 

　　mouseover:鼠标移入，冒泡

 

　　mouseout:鼠标移出，冒泡

 

　　mouseenter:鼠标移入，不冒泡

 

　　mouseleave:鼠标移出，不冒泡

 

　　contextmenu:右键菜单

 

　　wheel:滚轮事件

 

　　其具有如下常用属性:

 

　　altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；

 

　　button返回事件的鼠标键信息,值为0(左键),1或4(中键,4为IE中的值)，2(右键)，可通过switch来选择执行分之)；

 

　　buttons属性返回一个3个比特位的值，表示同时按下了哪些键

 

　　clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素

 

　　screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素

 

　　movementX，movementY返回一个位移，单位为像素，表示当前位置与上一个mousemove事件之间的距离，在数值上:

 

　　currentEvent.movementX=currentEvent.screenX-previousEvent.screenX

 

　　currentEvent.movementY=currentEvent.screenY-previousEvent.screenY

 

　　relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如:mouseouttarget指将要离开的节点，relatedTarget指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null

 

　　wheel事件是与鼠标滚轮相关的事件，浏览器提供一个WheelEvent构造函数newWheelEvent(typeArg,mouseEventInit)

 

　　deltaX:返回一个数值，表示滚轮的水平滚动量

 

　　deltaY:返回一个数值，表示滚轮的垂直滚动量

 

　　deltaZ:返回一个数值，表示滚轮的Z轴滚动量

 

　　deltaMode:返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页

 

　　键盘事件KeyboardEvent对象

 

　　构造函数newKeyboardEvent(typeArg,KeyboardEventInit)

 

　　键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl,Alt,Shift和Meta，就接着触发keypress事件),keyup(松开键盘时触发该事件)

 

　　altKey，ctrlKey，metaKey，shiftKey:返回一个布尔值，表示是否按下对应的键

 

　　key:返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名

 

　　keyCode:返回按键的ASCII码，注意:这里是不区分大小写的，A键不论输出A还是akeyCode都是68。在IE中使用witch属性

 

　　进度事件ProgressEvent对象

 

　　newProgressEvent(type,{

 

　　lengthComputable:aBooleanValue,//falseasdefault

 

　　loaded:aNumber,//0asdefault

 

　　total:aNumber//0asdefault

 

　　});

 

　　进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程,<img>,<audio>,<video>,<style>,<link>加载外部资源的过程，包括下载和上传。通常包括以下事件:

 

　　abort事件:当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。

 

　　error事件:由于错误导致资源无法加载时触发，不会冒泡。error事件的监听函数最好放在如img元素的HTML属性中。

 

　　load事件:进度成功结束时触发。

 

　　loadstart事件:进度开始时触发。

 

　　loadend事件:进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。

 

　　progress事件:当操作处于进度之中，由传输的数据块不断触发。

 

　　timeout事件:进度超过限时触发

 

　　这类事件具有以下属性:

 

　　lengthComputable:返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。

 

　　total:返回一个数值，表示当前进度的总长度。如果是通过HTTP下载某个资源，表示内容本身的长度，不含HTTP头部的长度。如果lengthComputable属性为false，则total属性就无法取得正确的值。

 

　　loaded:返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。

 

　　//进度计算

 

　　if(e.lengthComputable){

 

　　varpercentComplete=e.loaded/e.total;

 

　　}

 

　　拖拽事件DragEvent对象

 

　　newDragEvent(type,DragEventInit);

 

　　拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括Element节点,图片,链接,选中的文字等等。在HTML网页中，除了Element节点默认不可以拖拽，其他(图片,链接,选中的文字)都是可以直接拖拽的。为了让Element节点可拖拽，可以将该节点的draggable属性设为true。draggable属性可用于任何Element节点，但是图片(img元素)和链接(a元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为false，防止拖拽。注意，一旦某个Element节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。

 

　　当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:

 

　　drag事件:拖拽过程中，在被拖拽的节点上持续触发。

 

　　dragstart事件:拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。

 

　　dragend事件:拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。

 

　　dragenter事件:拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。

 

　　dragover事件:拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。

 

　　dragleave事件:拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。

 

　　drop事件:被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。

 

　　关于拖拽事件，有以下几点注意事项:

 

　　拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。

 

　　将文件从操作系统拖拽进浏览器，不会触发dragStart和dragend事件。

 

　　dragenter和dragover事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为drop的目标节点，所以这两个事件的默认设置为当前节点不允许drop。如果想要在目标节点上drop拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。

 

　　<pondragover="returnfalse">

 

　　//或

 

　　<pondragover="event.preventDefault()">

 

　　拖拽事件用一个DragEvent对象表示，该对象继承MouseEvent对象，DragEvent对象只有一个独有的属性dataTransfer，其他都是继承的属性。dataTransfer属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个dataTransfer属性，用来保存需要传递的数据，这个属性的值是一个DataTransfer对象。拖拽的数据保存两方面的数据:数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如text/plain或者image/jpg，数据的值是一个字符串;

 

　　dataTransfer对象的属性的值是一个对象，其中包括以下属性:

 

　　dropEffect属性:设置放下(drop)被拖拽节点时的效果，可能的值包括copy(复制被拖拽的节点),move(移动被拖拽的节点),link(创建指向被拖拽的节点的链接),none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。

 

　　effectAllowed属性:设置本次拖拽中允许的效果，可能的值包括copy,move,link,copyLink,copyMove,linkMove,all,none,uninitialized(默认值，等同于all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。

 

　　files属性:是一个FileList对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的FileList对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用FileReader对象。

 

　　types属性:是一个数组，保存每一次拖拽的数据格式，如'text/uri-list'

 

　　setData()方法:用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。

 

　　event.dataTransfer.setData("text/plain","Texttodrag");

 

　　getData()方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用setData方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。

 

　　event.dataTransfer.getData(types[0]);

 

　　clearData()方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。

 

　　event.dataTransfer.clearData("text/uri-list");

 

　　setDragImage()可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

 

　　event.dataTransfer.setDragImage(img,0,0);

 

　　触摸事件

 

　　newTouch(touchInit);

 

　　触摸事件包括以下5种:

 

　　touchstart:用户接触触摸屏时触发，它的target属性返回发生触摸的Element节点(IE10+中使用mspointerdown事件);

 

　　touchend:用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的target属性与touchstart事件的target属性是一致的，它的changedTouches属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用mspointerup事件);

 

　　touchmove:用户移动触摸点时触发，它的target属性与touchstart事件的target属性一致。如果触摸的半径,角度,力度发生变化，也会触发该事件。(IE10+中使用mspointermove事件);

 

　　touchenter:当触点进入某个element时触发。此事件没有冒泡过程。(IE10+中使用mspointerover事件);

 

　　touchleave:当触点离开某个element时触发。此事件没有冒泡过程。(IE10+中使用mspointerout事件);

 

　　touchcancel:当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);

 

　　由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框或电话打断;

 

　　触点离开了文档窗口，而进入了浏览器的界面元素,插件或者其他外部内容区域;

 

　　当用户产生的触点个数超过了设备支持的个数，从而导致TouchList中最早的Touch对象被取消。

 

　　触摸API由三个对象组成。每个Touch对象代表一个触点;每个触点都由其位置，大小，形状，压力大小，和目标element描述。TouchList对象代表多个触点的一个列表。具体包括以下属性:

 

　　identifier属性:表示touch实例的独一无二的识别符。它在整个触摸过程中保持不变(IE10+中使用pointerId属性);

 

　　screenX/screenY属性:分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关;

 

　　clientX/clientY属性:分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关;

 

　　pageX/pageY属性:分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移;

 

　　radiusX/radiusY属性:分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素;

 

　　rotationAngle属性:表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域(IE10+中使用rotation属性);

 

　　force属性:返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力(IE10+中使用pressure属性,取值0-255);

 

　　target属性:返回一个Element节点，代表触摸发生的那个节点。当这个触点最开始被跟踪时(在touchstart事件中),触点位于的HTML元素.哪怕在触点移动过程中,触点的位置已经离开了这个元素的有效交互区域,或者这个元素已经被从文档中移除.需要注意的是,如果这个元素在触摸过程中被移除,这个事件仍然会指向它,但是不会再冒泡这个事件到window或document对象.因此,如果有元素在触摸过程中可能被移除,最佳实践是将触摸事件的监听器绑定到这个元素本身,防止元素被移除后,无法再从它的上一级元素上侦测到从该元素冒泡的事件.只读属性.

 

　　altKey/ctrlKey/metaKey/shiftKey都为只读属性:返回一个布尔值，表示触摸的同时，是否按下某个键

 

　　changedTouches属性:返回一个TouchList对象，包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的Touch对象。只读属性。

 

　　targetTouches属性:返回一个TouchList对象，包含了触摸的目标Element节点内部，所有仍然处于活动状态的触摸点。

 

　　touches属性返回一个TouchList对象(类数组的对象)，包含了所有当前接触触摸平面的触点的Touch对象，无论它们的起始于哪个element上，也无论它们状态是否发生了变化。只读属性

 

　　type属性:指此次触摸事件的类型。

 

　　target属性:此次触摸事件的目标element。这个目标元素对应TouchEvent.changedTouches中的触点的起始元素(在之后的事件类型中有说明)，但是请注意:此次事件中其他的触点的起始元素可能有所不同。以防万一，应使用和每一个单独触点相关联的目标。

 

　　以下是IE10+中的其他属性：

 

　　hwTimestamp:创建事件时间(毫秒);

 

　　isPrimary:表示该时间是否是主事件;

 

　　pointerType:取值自event.MSPOINTER_TYPE_TOUCH,event.MAPOINTER_TYPE_PEN,event.MSPOINTER_TYPE_MOUSE,表示触摸设备;

 

　　tilt[X|Y]:笔的倾斜程度;

 

　　举一个简单例子：

 

　　functionhandleMove(evt){

 

　　evt.preventDefault();//阻止浏览器继续处理触摸事件，也阻止发出鼠标事件

 

　　vartouches=evt.changedTouches;

 

　　for(vari=0;i<touches.length;i++){

 

　　varid=touches[i].identifier;

 

　　vartouch=touches.identifiedTouch(id);

 

　　console.log(touch.pageX,touch.pageY);

 

　　}

 

　　}

 

　　对于跨平台交互，我封装了一个tap相关事件如下：

 

　　

 

　　//以下代码并未兼容低版本IE

 

　　functionaddTapListener(node,callback){

 

　　varstartEvent=window.onmousedown?window.onmspointerdown?'mspointerdow':'mousedown':'touchstart';

 

　　varevent=window.onclick?'click':'touch';

 

　　varendEvent=window.onmouseup?'mouseup':'touchend';

 

　　node.addEventListener(startEvent,function(e){

 

　　vartap=document.createEvent('CustomEvent');

 

　　tap.initCustomEvent('tapstart',true,true,null);

 

　　node.dispatchEvent(tap);

 

　　});

 

　　node.addEventListener(event,function(e){

 

　　vartap=document.createEvent('CustomEvent');

 

　　tap.initCustomEvent('tap',true,true,null);

 

　　node.dispatchEvent(tap);

 

　　});

 

　　node.addEventListener(endEvent,function(e){

 

　　vartap=document.createEvent('CustomEvent');

 

　　tap.initCustomEvent('tapend',true,true,null);

 

　　node.dispatchEvent(tap);

 

　　});

 

　　node.addEventListener('tap',callback);

 

　　}

 

　　当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件:animationstart,animation,animationend等等。





本文转载自中文网