Events

事件类型(DOM3级)

typeDescriptionMark
UI事件用户与页面上元素交互 
焦点事件元素得失焦点触发 
鼠标事件用户用鼠标与页面交互 
滚轮事件用户用鼠标滚轮与页面交互 
文本事件用户在文档中输入文本 
键盘事件用户用键盘与页面交互 
合成事件当为IME(输入法编辑器)输入字符时触发 
变动事件底层DOM结构变动时触发 

PC端

  1. window事件属性(适用于body标签)
PropertiesDescriptionMark
onafterprint在打印文档之后运行脚本New
onbeforeprint在文档打印之前运行脚本New
onbeforeonload在文档加载之前运行脚本New
onblur当窗口失去焦点时运行脚本 
onerror当错误发生时运行脚本New
onfocus当窗口获得焦点时运行脚本 
onhaschange当文档改变时运行脚本New
onload当文档加载时运行脚本 
onmessage当触发消息时运行脚本New
onoffline当文档离线时运行脚本New
ononline当文档上线时运行脚本New
onpagehide当窗口隐藏时运行脚本New
onpageshow当窗口可见时运行脚本New
onpopstate当文档执行再执行操作(redo)时运行脚本New
onresize当调整窗口大小时运行脚本New
onstorage当文档加载加载时运行脚本New
onundo当 Web Storage 区域更新时(存储空间中的数据发生变化时)New
onunload当用户离开文档时运行脚本New
  1. form事件属性(适用于所有h5元素,常用于表单)
PropertiesDescriptionMark
onblur当元素失去焦点时运行脚本 
onchange当元素改变时运行脚本 
oncontextmenu当触发上下文菜单时运行脚本New
onfocus当元素获得焦点时运行脚本New
onformchange当表单改变时运行脚本New
onforminput当表单获得用户输入时运行脚本New
oninput当元素获得用户输入时运行脚本New
oninvalid当元素无效时运行脚本New
onreset当表单重置时运行脚本。HTML 5 不支持 
onselect当选取元素时运行脚本 
onsubmit当提交表单时运行脚本 
  1. keyboard事件(适用于所有h5元素)
PropertiesDescriptionMark
onkeydown当按下按键时运行脚本 
onkeypress当按下并松开按键时运行脚本 
onkeyup当松开按键时运行脚本 
  1. mouse事件(适用于所有h5元素)
PropertiesDescriptionMark
onclick当单击鼠标时运行脚本 
ondblclick当双击鼠标时运行脚本 
ondrag当拖动元素时运行脚本New
ondragend当拖动操作结束时运行脚本New
ondragenter当元素被拖动至有效的拖放目标时运行脚本New
ondragleave当元素离开有效拖放目标时运行脚本New
ondragover当元素被拖动至有效拖放目标上方时运行脚本New
ondragstart当拖动操作开始时运行脚本New
ondrop当被拖动元素正在被拖放时运行脚本New
onmousedown当按下鼠标按钮时运行脚本 
onmousemove当鼠标指针移动时运行脚本 
onmouseout当鼠标指针移出元素时运行脚本 
onmouseover当鼠标指针移至元素之上时运行脚本 
onmouseup当松开鼠标按钮时运行脚本 
onmousewheel当转动鼠标滚轮时运行脚本New
onscroll当滚动元素滚动元素的滚动条时运行脚本New
  1. media事件(适用于所有h5元素,常用于媒体元素)
PropertiesDescriptionMark
onabort当发生中止事件时运行脚本 
oncanplay当媒介能够开始播放但可能因缓冲而需要停止时运行脚本New
oncanplaythrough当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本New
ondurationchange当媒介长度改变时运行脚本New
onemptied当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本New
onended当媒介已抵达结尾时运行脚本New
onerror当在元素加载期间发生错误时运行脚本New
onloadeddata当加载媒介数据时运行脚本New
onloadedmetadata当媒介元素的持续时间以及其他媒介数据已加载时运行脚本New
onloadstart当浏览器开始加载媒介数据时运行脚本New
onpause当媒介数据暂停时运行脚本New
onplay当媒介数据将要开始播放时运行脚本New
onplaying当媒介数据已开始播放时运行脚本New
onprogress当浏览器正在取媒介数据时运行脚本New
onratechange当媒介数据的播放速率改变时运行脚本New
onreadystatechange当就绪状态(ready-state)改变时运行脚本New
onseeked当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本New
onseeking当媒介元素的定位属性为真且定位已开始时运行脚本New
onstalled当取回媒介数据过程中(延迟)存在错误时运行脚本New
onsuspend当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本New
ontimeupdate当媒介改变其播放位置时运行脚本New
onvolumechange当媒介改变音量亦或当音量被设置为静音时运行脚本New
onwaiting当媒介已停止播放但打算继续播放时运行脚本New
  1. 其它事件
PropertiesDescriptionMark
onshow当 <menu> 元素在上下文显示时触发 
ontoggle当用户打开或关闭
元素时触发
 

移动端

理解click的300ms的延迟响应 Click事件在移动手机开发中有300ms的延迟,因为在手机早期,浏览器系统有放大和缩放功能,用户在屏幕上点击两次之后, 系统会触发放大或者缩放功能,因此系统做了一个处理,当触摸一次后,在300ms这段时间内有没有触摸第二次, 如果触摸了第二次的话,说明是触发放大或缩放功能,否则的话是click事件。因此当click时候,所有用户必须等待于300ms后才 会触发click事件。所以当在移动端使用click事件的时候,会感觉到有300ms的迟钝。

  1. touch事件
PropertiesDescriptionMark
touchstart当手指放在屏幕上触发 
touchmove当手指在屏幕上滑动时,连续地触发 
touchend当手指从屏幕上离开时触发 
touchcancel当系统停止跟踪时触发; 该事件暂时使用不到 
touches表示当前跟踪的触摸操作的touch对象的数组 
targetTouches特定于事件目标的touch对象的数组 
changedTouches上次触摸以来发生了什么改变的touch对象的数组 
  1. gesture事件
PropertiesDescriptionMark
gesturestart当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发 
gesturechange当触摸屏幕的任何一个手指的位置发生改变的时候触发 
gestureend当任何一个手指从屏幕上面移开时触发 

触摸事件和手势事件的之间关系: 当一个手指放在屏幕上时,会触发touchstart事件,而另一个手指触摸在屏幕上时 触发gesturestart事件,随后触发基于该手指的touchstart事件。 如果一个或两个手指在屏幕上滑动时,将会触发gesturechange事件,但是只要有一个手指移开时候,则会触发gestureend事件, 紧接着会触发touchend事件。 手势的专有属性: rotation: 表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从0开始; scale: 表示2个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始的,并随距离拉大而增长。

常用事件

  • PC端
    1. window事件属性(适用于body标签)
PropertiesDescriptionMark
onblur当窗口失去焦点时运行脚本 
onerror当错误发生时运行脚本New
onfocus当窗口获得焦点时运行脚本 
onload当文档加载时运行脚本 
onresize当调整窗口大小时运行脚本New
  1. form事件属性(适用于所有h5元素,常用于表单)
PropertiesDescriptionMark
onblur当元素失去焦点时运行脚本 
onchange当元素改变时运行脚本 
onfocus当元素获得焦点时运行脚本New
oninput当元素获得用户输入时运行脚本New
onreset当表单重置时运行脚本。HTML 5 不支持 
onselect当选取元素时运行脚本 
onsubmit当提交表单时运行脚本 
  1. keyboard事件(适用于所有h5元素)
PropertiesDescriptionMark
onkeydown当按下按键时运行脚本 
onkeypress当按下并松开按键时运行脚本 
onkeyup当松开按键时运行脚本 
  1. mouse事件(适用于所有h5元素)
PropertiesDescriptionMark
onclick当单击鼠标时运行脚本 
ondblclick当双击鼠标时运行脚本 
ondrag当拖动元素时运行脚本New
ondragend当拖动操作结束时运行脚本New
ondragenter当元素被拖动至有效的拖放目标时运行脚本New
ondragleave当元素离开有效拖放目标时运行脚本New
ondragover当元素被拖动至有效拖放目标上方时运行脚本New
ondragstart当拖动操作开始时运行脚本New
ondrop当被拖动元素正在被拖放时运行脚本New
onmousedown当按下鼠标按钮时运行脚本 
onmousemove当鼠标指针移动时运行脚本 
onmouseout当鼠标指针移出元素时运行脚本 
onmouseover当鼠标指针移至元素之上时运行脚本 
onmouseup当松开鼠标按钮时运行脚本 
onmousewheel当转动鼠标滚轮时运行脚本New
onscroll当滚动元素滚动元素的滚动条时运行脚本New
  1. media事件(适用于所有h5元素,常用于媒体元素)
PropertiesDescriptionMark
onabort当发生中止事件时运行脚本 
onerror当在元素加载期间发生错误时运行脚本New
onloadeddata当加载媒介数据时运行脚本New
onpause当媒介数据暂停时运行脚本New
onplay当媒介数据将要开始播放时运行脚本New
onplaying当媒介数据已开始播放时运行脚本New
onwaiting当媒介已停止播放但打算继续播放时运行脚本New
  • 移动端

    理解click的300ms的延迟响应 Click事件在移动手机开发中有300ms的延迟,因为在手机早期,浏览器系统有放大和缩放功能,用户在屏幕上点击两次之后, 系统会触发放大或者缩放功能,因此系统做了一个处理,当触摸一次后,在300ms这段时间内有没有触摸第二次, 如果触摸了第二次的话,说明是触发放大或缩放功能,否则的话是click事件。因此当click时候,所有用户必须等待于300ms后才 会触发click事件。所以当在移动端使用click事件的时候,会感觉到有300ms的迟钝。

  1. touch事件
PropertiesDescriptionMark
touchstart当手指放在屏幕上触发 
touchmove当手指在屏幕上滑动时,连续地触发 
touchend当手指从屏幕上离开时触发 
touchcancel当系统停止跟踪时触发; 该事件暂时使用不到 
touches表示当前跟踪的触摸操作的touch对象的数组 
  1. gesture事件
PropertiesDescriptionMark
gesturestart当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发 
gesturechange当触摸屏幕的任何一个手指的位置发生改变的时候触发 
gestureend当任何一个手指从屏幕上面移开时触发 

Tags:

Categories:

Updated:

Leave a Comment

comments powered by Disqus