事件总结

DOM事件主要内容

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

什么是DOM事件?

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

事件流

兼容性

事件对象(共有的)

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

以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

<image alt = "photo" src = "www.baidu.com" onerror = "this.src = 'www.wangyi.com'"/>

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