事件总结

DOM事件主要内容

事件流
事件注册
事件对象
事件分类
事件代理

什么是DOM事件?

事件是某个行为或者触发，比如点击、鼠标移动
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当用户触发按键时...

事件流

capture phase捕获事件
- 事件对象通过目标的祖先从传播窗口到目标的父。这个阶段也被称为捕获阶段
target phase
- DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
bubble phase 冒泡
- IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

参考资料: 事件流

事件注册与触发

在讲述事件注册之前,讲一下前面的事件处理程序

HTML内联方式
- 存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
- 这样书写html代码和JavaScript代码紧密耦合，维护不方便

JavaScript指定事件处理程序
- 把一个方法赋值给一个元素的事件处理程序属性。
- 可以删除事件处理程序，只需把元素的onclick属性赋为null即可

事件注册(DOM2事件处理程序)

eventTarget.addEventListener(type,listener[,useCapture])
- 事件类型
- 事件处理方法
- 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

var elem = document.getElementById("div1")
var clickHandler = function(){
  //to do
}
elem.addEventListener('click',clickHandler,false)

取消事件注册

eventTarget.removeEventListener(type,listener[,useCapture])
- 事件类型
- 事件处理方法
- 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是

elem.removeEventListener('click',clickHandler,false)
elem.onclick = null

事件触发

eventTarget.dispatchEvent(type)

elem.dispatch("click")

浏览器兼容性(IE6 7 8)

事件注册与取消

IE并不支持addEventListener和removeEventListener方法，而是实现了两个类似的方法

attachEvent
detachEvent
这两个方法都接收两个相同的参数
- 事件处理程序名称
- 事件处理程序方法

事件触发

fireEvent(e)

no capture没有捕获

兼容性

事件对象(共有的)

当事件被触发的时候,会调用事件处理函数,在调用时间处理函数中,有一些信息,这些信息代表着事件的状态,这个就是事件对象

以click为例

属性
- type类型:例如点击什么的...
- target(srcElement IE低版本)目标元素,点击哪个就是那个
- currentTarget:事件处理程序当前处理元素
方法
- stopPropagation()取消事件进一步捕获或冒泡
- preventDefault()取消事件默认行为

阻止事件传播(冒泡)

event.stopPropagation()W3C
event.cancelBubble=trueIE

默认行为

event.preventDefault()W3C
event.returnValue = false IE

事件分类

事件种类

MouseEvent

事件类型	是否冒泡	元素	默认事件	元素例子
`click(点击)`	Yes	element	focus/activation	div
`dbclick(双击)`	Yes	element	focus/activation	div
`mousedown`	Yes	element	drag/scroll text selection	div
`mousemove`	Yes	element	None	div
`mouseout鼠标离开`	Yes	element	None	div
`mouseover鼠标移上去,进入子元素也会触发`	Yes	element	None	div
`mouseup`	Yes	element	context menu	div
`mouseenter鼠标移上去`	No	element	None	div
`mouseleave鼠标离开`	No	element	None	div

MouseEvent对象

属性
- clientX, clientY位置
- screenX, screenY
- ctrlKey,shiftKey,altKey,metaKey
- button(0,1,2)鼠标左键还是右键还是滚轮

MouseEvent事件顺序

顺序

WheelEvent滚轮事件

事件类型	是否冒泡	元素	默认事件	元素例子
`wheel`	Yes	element	scroll or zoom document	div

FocusEvent 元素获得焦点和失去焦点

事件类型	是否冒泡	元素	默认事件	元素例子
`blur(失去焦点)`	No	Window,element	None	window,input
`focus(获得焦点)`	No	Window,element	None	window,input
`focusin(即将获得焦点)`	No	Window,element	None	window,input
`focunsout(即将失去焦点)`	No	Window,element	None	window,input

属性
- relatedTarget当一个元素失去焦点,另一个元素就会获得焦点

事件类型	是否冒泡	元素	默认事件	元素例子
`beforeinput`	Yes	Element	Update DOM Element	input
`input`	Yes	element	None	input

InputEvent 输入事件(W3C)

事件类型	是否冒泡	元素	默认事件	元素例子
`beforeinput`	Yes	Element	Update DOM Element	input
`input`	Yes	element	None	input

onpropertychange(ie)

KeyboardEvent键盘事件

事件类型	是否冒泡	元素	默认事件	元素例子
`keydown`	Yes	Element	input bulr/focus	input
`keyup按下去松开触发`	Yes	element	None	input

属性
- key按下什么键,值是字符串
- code
- ctrlKey,shiftKey,altKey,metaKey
- repeat持续按一个键

Event

事件类型	是否冒泡	元素	默认事件	元素例子
`load(事件加载)`	NO	Window,document,element	None	window,image,iframe
`unload(类似页面退出)`	No	Window,document,element	None	window
`error(加载错误)`	NO	Window,element	None	window,image
`select(input被选择..)`	NO	element	None	input,textarea
`abort(esc)`	NO	window,element	None	window,image

window对象	Image
`load`	`load`
`unload`	`error`
`error`	`abort`
`abort`

UIEvent

事件类型	是否冒泡	元素	默认事件	元素例子
`resize(窗体大小)`	NO	Window,element	None	window,iframe
`scroll(页面滚从)`	NO/Yes	Document,element	None	document,div

事件代理

参考我写的另一片文章从onClick谈事件代理和了解事件传播机制

总结一下不能冒泡的事件:

mouseenter
mouseleave
blur
focus
focusin
focusout
load
unload
error
select
abort
resize