DOM编程-事件（五）

焦点事件FocusEvent

处理元素获得焦点和失去焦点的事件，那么什么是获得焦点，什么是失去焦点呢？
比如有一个input输入框，当我们用鼠标点击一下，会有一个光标出现，这时就获得了焦点；当我们点击其他地方的时候光标消失，这就失去了焦点。

事件类型	是否冒泡	元素	默认事件	元素例子
blur	no	window、element	none	window、input
focus	no	window、element	none	window、input
focusin	no	window、element	none	window、input
focusout	no	window、element	none	window、input

blur当元素失去焦点时触发；focus当元素获得焦点触发；focusin当元素获得焦点之前；focusout当元素失去焦点之前触发。

FocusEvent的属性

*relatedTarget，当一个元素失去焦点，另一个元素就就将会获得焦点。针对于blur和focusout，获取焦点的元素就是relatedTarget，针对于focus和focusin，失去焦点的元素就是relatedTarget。

输入事件InputEvent

当我在输入框输入内容会不断地触发输入事件

事件类型	是否冒泡	元素	默认事件	元素例子
beforeinput	yes	element	update DOM Element	input
input	yes	element	none	input

比如在一个输入框中输入时，先会触发beforeinput事件，这时候内容还没有出现在输入框中，这时可以处理一些内容，该笔那一些行为。
而当我的输入框中的内容变成我输入的内容时，就会触发input事件。
再IE的低版本中，没有input事件，我们使用onpropertychange来代替。

键盘事件KeyboardEvent

比如按下回车提交表单

事件类型	是否冒泡	元素	默认事件	元素例子
keydown(按下一个按键)	yes	element	beforeinput/inputfocus/blur/actvation	div/input
keyup(按键回弹)	yes	element	none	div/input

KeyboardEvent属性

• key,一个字符串，代表按下了什么键
• code，按键码，也是一个字符串
• ctrlKey,shiftKey,altKey,metaKey,指按键时这些键有没有被按下，是一个boolern值
• repeat，有时候我们会长按一个键，repeat是true

其他事件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	no	element	none	input
abort	no	window、element	none	window、image