DOM事件
JavaScript和HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,一遍事件发生时执行相应的代码。
事件流
事件流描述的是从页面中接受事件的顺序。

- Capture Phase(事件捕获过程)当 DOM 事件发生时,它会从window节点一路跑下去直到触发事件元素的父节点为止,去捕获触发事件的元素。
- Target Phase(事件触发过程)当事件被捕获之后就开始执行事件绑定的代码
- Bubble Phase(冒泡过程)当事件代码执行完毕后,浏览器会从触发事件元素的父节点开始一直冒泡到window元素(即元素的祖先元素也会触发这个元素所触发的事件)
触发顺序: Capture -> Target -> Bubbling
补充:低版本IE不支持Capture Phase,不是任何的事件都有Bubble Phase,比如onload事件。
demo:
|
|
输出结果:
|
|
事件注册&取消
事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。而响应某个的函数就叫做事件处理程序。
DOM0级事件处理程序
|
|
|
|
DOM2级事件处理程序
|
|
|
|
NOTE:useCapture 为设定是否为捕获过程,默认事件均为冒泡过程,只有 useCapture 为 true 时才会启用捕获过程。使用DOM2级方法可以添加多个事件处理程序
IE事件处理程序
|
|
|
|
事件触发
点击元素,按下按键均会触发 DOM 事件,当然也可以以通过代码来触发事件
W3C标准
|
|
IE私有
|
|
事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件类型以及其他与特定事件相关的信息。
通用属性和方法
属性/方法 | 说明 |
---|---|
type | 被触发事件的类型 |
target | 事件的目标 |
currentTarget | 其数据处理程序当前正在处理事件的那个元素 |
stopImmediatePropagation() | 取消事件的进一步捕获或冒泡,同事阻止任何事件处理程序被调用 |
stopPropagaton() | 取消事件的进一步捕获或者冒泡。如果bubbles为true,则可以使用这方法 |
preventDefault() | 取消事件的默认行为。如果cancelable是TRUE,则可以使用这方法 |
NOTE:
- target和currentTarget区别
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。
demo:
|
|
- IE低版本的event被注册在 window 之上而非目标对象上。target属性被srcElement所替代。阻止冒泡和阻止默认行为亦有相对应的方法:
event.cancelBubble=true
阻止冒泡Event.returnValue=false
阻止默认行为。
事件类型

MouseEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
click | YES | 在用户单击主鼠标按钮或者按下回车键时触发 |
dblclick | YES | 在用户双击主鼠标按钮时触发 |
mouseup | YES | 在用户释放鼠标按钮时触发 |
mousedowm | YES | 在用户按下任意鼠标按钮时触发 |
mousemove | YES | 当鼠标指针在元素内部移动时重复地接触 |
mouseenter | NO | 在鼠标光标从元素外部首次移动到元素范围内时触发。光标移动到后代元素不会触发 |
mouseleave | NO | 在位于元素上方的鼠标鼠标光标移动到元素范围之外时触发。光标移动到后代元素不会触发 |
mouseover | YES | 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。 |
mouseout | YES | 在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。 |
NOTE:
只有在同一个元素上相继触发mousedown和mouseleave才会触发click事件。只有触发两次以上click事件才会触发一次dblclick事件。
mouseout移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。而mouseleave光标移动到后代元素上不会触发。mouseover和mouseenter的区别类似。请参考以下链接:
demo1 demo2
MouseEvent属性
属性 | 描述 |
---|---|
clientX, clientX | 事件发生时鼠标指正在视口中的水平和垂直坐标 |
screenX, screenY | 事件发生时鼠标指针相对于整个屏幕的坐标信息 |
ctrlKey, shiftKey, altKey, metaKey | 事件发生时用户是否按下了这几个键 |
button | mousedown和mouseup触发时,检测按键信息 |
NOTE:
- metaKey在Windows上对应Windows键,在mac上对应Cmd键
- button可取三个值,0:主鼠标按钮,1:鼠标滚轮按钮,2:次鼠标按钮
MouseEvent顺序
demo:从元素 A 上方移动过
mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> mouseout(A) -> mouseleave(A)+
demo:点击元素
mousedown -> [mousemove] -> mouseup -> click
WheelEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
wheel | YES | 在用户滚动鼠标滚轮或操作其他类似的输入设备时触发 |
WheelEvent属性
属性 | 描述 |
---|---|
deltaX | 水平滚动量 只读 |
deltaY | 垂直滚动量 只读 |
deltaZ | z轴滚动量. 只读 |
deltaMode | 增量值的单位 |
名称 | 值 | 描述 |
---|---|---|
DOM_DELTA_PIXEL | 0x00 | 增量值的单位为像素 |
DOM_DELTA_LINE | 0x01 | 增量值的单位为行 |
DOM_DELTA_PAGE | 0x02 | 增量值的单位为页 |
FocusEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
blur | NO | 失去焦点时触发 |
focus | NO | 获得焦点时触发 |
focusin | YES | 即将获得焦点时触发 |
focusout | YES | 即将失去焦点触发 |
NOTE:
- 触发focusin事件,relatedTarget对应的是失去焦点的节点。触发focusout事件,relatedTarget对应的是得到焦点的节点。
当焦点从页面中的一个元素移动到另一个元素,会依次触发focusout->focusing->blur->focus
InputEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
beforeInput | YES | 当<input> 或 <textarea>元素将要改变元素值时触发 |
input | YES | 当 <input> 或 <textarea>元素的值更改时触发 |
KeyboardEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
keyup | YES | 当用户释放键盘上的键时触发 |
keydown | YES | 当用户按下键盘上的任意键时触发 |
keypress | YES | 当用户按下键盘上的任意键时触发 |
KeyboardEvent属性
属性 | 描述 |
---|---|
key | 发生keydown和keyup时,key属性会对应键盘上一个特定的键。返回字符串 |
code | 发生keypress时,Code属性会对应键盘上一个特定的键。返回字符串 |
ctrlKey, shiftKey, altKey, metaKey | 事件发生时用户是否按下了这几个键 |
repeat | 长按时repeat会赋值为true |
keyCode | 发生keydown和keyup时,keyCode属性会对应键盘上一个特定的键。返回ASCII编码 |
charCode | 发生keypress时,charCode属性会对应键盘上一个特定的键。返回ASCII编码 |
which | keyCode或者charCode的ASCII编码 |
Event事件类型
事件 | 冒泡 | 描述 |
---|---|---|
load | NO | 一个资源及其相关资源已完成加载 |
unload | NO | 文档或一个依赖资源正在被卸载 |
error | NO | 一个资源的加载失败 |
select | NO | 文本被选中 |
abort | NO | 一个资源的加载已中止 |
NOTE:
- 当用户离开页面,点击某个页面链接,在地址栏中键入新的URL,使用前进或后退按钮,关闭浏览器,重新加载页面会触发unload事件
- img指向错误的src触发error事件
- img在加载中按了ESC触发abort事件
- 使用Image对象在客户端预先加载图像 eg:
var image=new Image();image.src="smile.gif"
;
UIEvent事件类型
事件 | 冒泡 | 描述 |
---|---|---|
resize | NO | 窗口或框架被重新调整大小 |
scroll | NO/YES | 当文档被滚动时发生的事件 |
事件委托
事件委托利用了事件冒泡,只指定了一个事件处理程序,就可以管理某一类型的所有事件。优点:需要管理的事件处理函数更少。减少占用的内存空间,提升整体性能。增加与删除子节点可以不额外处理事件。缺点:需要管理的事件处理函数更少。
|
|
|
|
NOTE:判断获取target值判断是否等于所要求的值,若不符合则将父节点赋值给target直到target的值等于currentTarget的值。
事件模拟和自定义事件
事件模拟
方法一
|
|
方法二
|
|
事件类型 | 事件初始化方法 |
---|---|
UIEvents | event.initUIEvent |
MouseEvents | event.initMouseEvent |
MutationEvents | event.initMutationEvent |
HTMLEvents | event.initEvent |
Event | event.initEvent |
CustomEvent | event.initCustomEvent |
KeyboardEvent | event.initKeyEvent |
自定义事件
|
|