event(事件对象)详解

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。当我单机某个元素的时候，这个元素注册的事件就会触发，事件的本质就是一个函数，这个函数接收一个event对象，这个函数不会在事件触发之前执行

简单的例子

let el = document.getElementById('name')
el.onclick = function(event){}

Event属性和方法：

altKey：判断是否按下了 "ALT" 键
ctrlKey：判断是否按下了 "CTRL" 键
metaKey：判断是否按下了 "META" 键
shiftKey：判断是否按下了 "SHIFT" 键
charCode：返回onkeypress 事件的键的 Unicode 字符代码
code：返回键的代码
key：返回键的键值
keyCode：返回触发 onkeypress 事件的键的 Unicode 字符码，或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码
getModifierState()：如果指定的键被激活，则返回 true
location：返回键盘或设备上按键的位置
repeat：判断是否重复按住某个键
which：返回触发 onkeypress 事件的键的 Unicode 字符码，或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码
button：返回当事件被触发时，哪个鼠标按钮被点击。(0 指定鼠标左键,1 指定鼠标中键,2 指定鼠标右键)
buttons：返回触发鼠标事件时按下的鼠标按钮
clientX：返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标(不包含滚动条)
clientY：返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标(不包含滚动条)
movementX：返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标
movementY：返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标
offsetX：返回鼠标指针相对于目标元素边缘位置的水平坐标
offsetY：返回鼠标指针相对于目标元素边缘位置的垂直坐标
pageX：返回触发鼠标事件时鼠标指针相对于文档的水平坐标
pageY：返回触发鼠标事件时鼠标指针相对于文档的垂直坐标
screenX：返回触发事件时鼠标指针相对于屏幕的水平坐标
screenY：返回触发事件时鼠标指针相对于屏幕的垂直坐标

组合键

举个例子，监听ctrl+c

document.onkeydown = function (e) {
    var keyCode = e.keyCode || e.which || e.charCode    // 兼容写法
    var ctrlKey = e.ctrlKey   // 监听ctrl是否被按下
    if (ctrlKey && keyCode == 67) {
        alert("组合键成功,键盘键入ctrl+c执行该方法")
    }
}

键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171