“DOM3级事件”规定了以下几类事件:
UI事件:当用户与页面上的元素交互时触发。 焦点事件:当用户获得或失去焦点时触发。 滚轮事件:当使用鼠标滚轮(或类似设备)时触发。 文本事件:当在文档中输入文本时触发。 键盘事件:当用户通过键盘在页面上执行操作时触发。 合成事件:当为IME输入字符时触发。 变动事件:当底层DOM结构发生变化时触发。
UI事件指的是那些不一定与用户操作有关的事件。 多数这些事件都与window对象或表单控件有关。
当页面完全加载后(包括所有图像、
Script文件、CSS文件等外部资源),就会触发window上面的load事件。 定义onload事件处理程序的方式:
EventUtil对象中的方法 为元素添加一个onload特性
一般来说,在window上面发生的任何事件都可以在元素中通过相应的特性来指定,因为在html中无法访问window元素,但不建议这样使用。 图像也可以触发(DOM/HTML)
元素也会触发load事件
在DOM中,要在指定src属性之前先指定事件。 新图像元素不一定要从添加到文档后才开始下载,只要设置了src属性就会开始下载。 使用DOM0级的Image对象实现,在DOM出现之前,开发人员经常使用Image对象在客户端预先加载图像,但是无法将其添加到DOM树中。
以便开发人员确定动态加载的
与图像不同,设置src并将其添加到文档后,才会开始下载文件。
文件是否加载完毕。
可以
这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会发生该事件。
触发unload事件,在页面加载后存在的那些对象也就不一定存在了,此时操作就会导致错误。
当
这个事件在window(窗口)上面触发,因此可以通过JavaScript或者元素中的onresize特性来指定事件处理程序。
窗口被调整到一个新的高度或宽度时,就会触发。
在文档滚动期间触发。
焦点事件会在页面元素获得或失去焦点时触发。
在元素失去焦点时触发。
在元素获得焦点时触发。
DOMFocusOut 4
blur 3
focusout 1
上述后面的数字代表当焦点从一个元素移动到另一个元素后触发的事件顺序。
DOMFocusIn 6
focus 5
focusin 2
mou
mousemove :在元素内部移动时重复地触发
mouseleave :移动到元素范围之外
mouseenter :首次移动到元素范围内部
mousudown :按下了任意鼠标按钮
dbclick :左键双击
click :左键单击啊/回车键
取消鼠标事件将会影响浏览器的默认行为。
页面上的所有元素都支持鼠标事件。
mouseup :释放鼠标按钮时
mouseover :从一个元素外部首次移入另一个元素内部
ut :鼠标从一个元素上方,移入另一个元素
mousewheel事件,跟踪鼠标滚轮,类似于Mac的触控板。
clientX和clientY表示视口中的水平和垂直坐标。
鼠标事件都是在浏览器视口中的特定位置上发生的。
页面坐标=视口坐标+滚动信息
pageX和pageY表示在页面中的水平和垂直坐标。
screenX和screenY
相对于整个电脑屏幕的位置。
4个属性,表示这些修改键的状态,布尔值,被按下为true
修改键:Shift、Ctrl、Alt、Meta
在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。
metaKey
altKey
ctrlKey
shiftKey
ie不支持上述属性
DOM通过event对象的relateTarget属性提供了相关元素的信息。这个属性只对于上述2个事件才包含值,对于其他事件,值为null。
在发生mouseover和mouseout事件时,还会涉及更多的元素。
mouseout:toElement
mouseover:fromElement
button属性有3个值:
对于mousedown和mouseup事件,在其event对象存在一个button属性,表示按下或释放的按钮。
ie中的版本不同,需要通过MouseEvents特性来检测,来确定是否包含正确的值,如果测试失败,说明是ie
2:次鼠标按钮
1:中间的鼠标按钮
0:主鼠标按钮
鼠标事件:detail中包含了一个数值,表示在给定位置上发生了多少次单击。
在event对象中还提供了detail属性,用于给出有关事件的更多信息。
与mousewheel事件对应的event对象还包含一个wheelDelta属性。
这个事件可以在任何元素上面触发。最终会冒泡到document对象。
firefox支持一个DOMMouseScroll的类似事件,信息保存在detail中
在opera9.5之前,上述正负号相反。
向后滚动:值为-120的倍数
向前滚动:值为120的倍数
向后滚动:3的倍数
向前滚动:-3的倍数
两个手指放在屏幕上且页面随手指一动而滚动时会触发mousewheel和scroll事件
mousemove事件也会触发mouseover和mouseout事件
轻击可单击元素会触发mousemove事件
不支持dbclick事件
不要使用dbclick执行重要的操作
不要使用mouseover向用户显示新的选项。
使用click事件执行代码
只有在通过文本框输入文本时才最常用到。
keyup:释放键盘上的键时触发。3
keypress:按下键盘上的字符键触发(包括esc)2
keydown:按下键盘上的任意键触发。1
对数字字母字符键,keyCode对应ASCLL码,字母为小写的ascll码。
在发生keydown和keyup事件时,event对象的keyCode属性中会保存一个代码,与键盘上一个特定的键对应。
charCode属性,只有在发生keypress事件时才包含值。值为按下的那个键的ASCLL编码。
发生keypress事件意味着按下的键会影响到屏幕中文本的显示。
包含新属性:
DOM3级事件中,不再包含charCode属性。
新属性(ie9支持):location,数值,表示按下了什么位置的键:
char:按下为字符键时同上,非字符键时为null
key:值是一个字符串。被按下的文本字符,非字符键键时,是相应键名
给event对象添加了getModifierState()方法。(ie9支持)
等价上述属性(safari和chrome支持):keyLocation属性,有bug,除了按下数字键盘为3,其余都为0
5:手柄
4:移动设备键盘
3:数字小键盘
2:右侧
1:左侧
0:默认键盘
如果是被按下的,值为true
表示要检测的修改符
接收一个参数,即等于shift。。的字符串
当用户在
还有一个inputMethod属性,表示把文本输入到文本框的方式
它的event对象包含一个data属性,值为输入的字符
中输入字符时,就会触发这个事件。
Wii遥控器上的按键时触发
IME通常需要同时按住多个键,但最终只输入一个字符
IME可以让用户输入在物理键盘上找不到的字符。
用于处理IME的输入序列
compositionstart:在IME的文本复合
data属性:
目标是接收文本的输入字段
compositionend:在IME的文本复合系统关闭时触发
compositionupdate:在向输入字段中插入新字符时触发
打开时触发
compositionend:包含此次输入会话中的所有字符
compositionupdate:包含正插入的新字符
compositionstart:包含正在编辑的文本
变动事件是为XML或HTML DOM设计的,并不特定于某种语言。
DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。
在使用removeChild()或replaceChild()从DOM中删除节点时,首先会触发DOMNodeRemoved事件。
如果被删除的节点包含子节点,那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFromDocument事件。
冒泡
parentNode:父节点
event.relateNode:对目标节点父节点的引用
事件目标:被删除的节点
紧随其后的是DOMSubtreeModified事件
目标:相应的子节点或者那个被移除的节点。
但这个事件不会冒泡。
目标:被移除的父节点
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先会触发DOMNodeInserted事件。
紧接着,会在新插入的节点上面触发DOMNodeInsertedDocument事件。
冒泡
event.relateNode:对目标节点父节点的引用
目标:被插入的节点
最后一个触发的是DOMSubtreeModified,触发于新插入节点的父节点。
目标:被插入的节点
不冒泡
在所有浏览器中都可以取消这个事件
目标:发生用户操作的元素
冒泡
用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单。
通常使用contextmenu事件来显示自定义的上下文菜单,使用onclick事件处理程序来隐藏该菜单。
属于鼠标事件,包含与光标位置有关的所有属性。
event.returnValue:ie
event.preventDefault():兼容DOM的浏览器
在浏览器卸载页面之前触发。
之所以有发生在window对象上的beforeunload事件,是为了让开发人员有可能在页面卸载前阻止这一操作。
这个事件始终都会在load事件之前触发。
可以为document或window添加相应的事件处理程序(尽管这个事件会冒泡到window,但它的目标实际上是document)
在形成完整的DOM树之后就会触发,不理会图像、JavaScript文件、css文件或其他资源是否已经下载完毕。
readyState属性,值为:
提供与文档或元素的加载状态有关的信息。
交互阶段可能会早于也可能会晚于完成阶段出现,无法确保顺序。
在与load事件一起使用时,无法预料两个事件触发的先后顺序。
对于document而言,值为“interactive”的readyState会在与DOMContentLoaded大致相同时触发readyStatechange事件。
complete(完成):对象已经加载完毕。
interactive(交互):可以互相操作对象了,但还没有完全加载。
loaded(加载完毕):对象加载数据完成
loading(正在加载):对象正在加载数据
uninitialized(未初始化):对象存在但尚未初始化
元素也会触发readystatechange事件
要一并检测上述两个状态,并在调用了一次事件处理程序后就将其移除。
也存在无论等于”loaded“还是”complete“都可以表示资源已经可用。
可以用来确定外部的JavaScript和css文件是否已经加载完成
往返缓存bfcache
pageshow
如果页面位于bdcache中,那么再次打开该页面时就不会触发load事件。
可以加快页面的转换速度。
将整个页面都保存在了内存里。
pagehide
event对象还包含了persisted属性,布尔值,被包含在bfcache中为true
事件目标:document,但必须将事件处理程序添加到window上
对于bfcache中的页面,会在页面状态完全恢复的那一刻触发。
对于重新加载的页面,会在load事件之后触发
在页面显示时触发,无论该页面是否来自bfcache
event对象还包含了persisted属性,布尔值,如果页面在卸载之后会被保存在bfcache中,则为true
事件目标:document,但必须将事件处理程序添加到window上
在浏览器卸载页面的时候触发,在unload事件之前触发
event对象额外包含两个属性
URL参数列表只要发生变化就会调用该事件
newURL
oldURL
移动safari的window.orientation属性可能包含3个值
只要用户改变了设备的查看模式,就会触发该事件(所有ios设备都支持)
180:头朝下
-90:向右旋转的横向模式
90:向左旋转的横向模式
0:肖像模式
event对象包含3个属性:x、y、z
只能提供一个平面的方向变化
当设备的加速计检测到设备方向改变时,就会触发这个事件
移动设备:z减少
接近用户倾斜:y增大
远离用户倾斜:y减少
向左倾斜:x增加
向右倾斜:x减少
静止状态:x=y=0,z=1
值都介于1到-1之间,表示不同坐标轴上的方向
对象中包含每个轴相对于设备静止状态下发生变化的信息:5个属性
该事件的意图是告诉开发人员设备在空间中朝向哪儿,而不是如何移动
也是在加速计检测到设备方向变化时在window对象上触发
通过这些信息,可以响应设备的方向,重新排列或修改屏幕上的元素
compassCalibrated:布尔值,表示设备的指南针是否校准过
absolute:布尔值,表示设备是否返回一个绝对值
gamma:围绕y轴旋转,z轴的度数差(-90-90的浮点数)
beta:围绕x轴旋转,z轴的度数差(-180-180的浮点数)
alpha:围绕z轴旋转,y轴的度数差(0-360的浮点数)
包含4个属性
告诉开发人员设备什么时候移动,而不仅仅是设备方向如何改变。例如,可以检测设备是不是正在往下掉,或者是不是被走着的人拿在手里
触摸事件
用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。
除了常见的DOM属性外,还包括3个用于跟踪触摸的属性
上面的事件都冒泡,都可以取消
touchcancel:当系统停止跟踪触摸时触发
touchend:当手指从屏幕上移开时触发
touchmove:当手指在屏幕上滑动时连续的触发
touchstart:当手指触摸屏幕时触发
每个Touch对象包含下列属性:
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组
targetTouches:特定于事件目标的Touch对象的数组
touches:表示当前跟踪的触摸操作的Touch对象的数组
事件发生顺序:
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分
在touchend事件发生时,touches集合中就没有任何Touch对象了,因为不存在活动的触摸操作;此时,就必须转而使用changeTouches集合
target:触摸的DOM节点目标
screenY
screenX
pageY
pageX
identifier:表示触摸的唯一id
clientY
clientX
touchstart->mouseover->mousemove(一次)->mousedown->mouseup->click->touched
3个手势事件
手势通常会改变显示项的大小,或者旋转显示项
只有两个手指都触摸到事件的接收容器时才会触发这些事件
包含2个额外的属性
gestureend:当任何一个手指从屏幕上移开时触发
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
scale:表示两个手指间距离的变化情况,值从1开始,拉大距离会增长
rotation:表示手指变化引起的旋转角度,负值为逆时针
来源: https://www.2cto.com/kf/201712/702158.html