1事件类型的种类1.1鼠标事件
1.3HTML事件
2获取当前鼠标位置
事件对象的获取方法都是在一个事件的回调中先传个形参，然后 var e = ev || window . event ; 这里window.event是为了兼容IE8以下，这样变量e鼠标事件里的各种属性了，从而我们可以方便的操作鼠标事件。
| 事件名 | 说明 |
| click | 单击 |
| dblclick | 双击 |
| mouseover | 鼠标移入 |
| mouseout | 鼠标移出 |
| mousemove | 鼠标移动(会不停的触发) |
| mouseenter | 鼠标移入 |
| mouseleave | 鼠标移出 |
这里也可以看下之前jQuery里的文章《jQuery里的事件》
1.2键盘事件键盘事件多用于表单元素里，全局window
| 事件名 | 说明 |
| keydown | 键盘按下(如果按下不松手会一直触发) |
| keyup | 键盘抬起 |
| keypress | 键盘按下(只支持字符键，如ctrl) |
1.window事件
| 事件名 | 说明 |
| load | 页面加载完触发 |
| unload | 页面解构(刷新页面，关闭页面)时触发 |
| scroll | 页面滚动 |
| resize | 窗口大小发生变化时触发 |
2.表单事件
| 事件名 | 说明 |
| blur | 失去焦点触发 |
| focus | 获得焦点触发 |
| select | 当我们在输入框选中文本时触发 |
| change | 当我们对输入框修改且失去焦点时触发 |
| submit | 表单提交时触发 |
| reset | 表单重置元素时触发 |
获取当前鼠标位置的属性有如下表所示，但是他们的区别是原点位置(参照物)不一样。
| 原点位置 | |
| clientX clientY | 可视窗口的左上角为原点 |
| pageX pageY | 整个页面的左上角(包含滚出去的滚动距离) |
| screenX screenY | 电脑屏幕的左上角 |
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标事件title> <script> window.onload = function () { /*事件对象： button的属性 0 左键 1 滚轮 2 右键 */ /* 获取当前鼠标位置(原点位置不一样) clientX clientY 原点位置：可视窗口的左上角为原点 pageX pageY 原点位置:整个页面的左上角(包含滚出去的滚动距离) screenX screenY 原点位置：电脑屏幕的左上角 */ document.onmousedown = function (ev) { var e = ev || window.event; // 事件对象的获取方法 //alert(e.button); 点击鼠标左键弹出0 点击鼠标右键弹出2 // alert(e.clientX + "," + e.clientY); // alert(e.pageX + "," + e.pageY); alert(e.screenX + "," + e.screenY); } }script>head><body>body>html>小练习：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> a { display: block; font-size: 40px; margin: 100px; width: 130px; } #msg { width: 500px; height: 150px; background: gray; color: white; display: none; position: absolute; }style> <script> window.onload = function () { var arr = ['唐太宗', '唐高祖', '武则天', '唐玄宗']; var aAs = document.getElementsByTagName("a"); var oMsg = document.getElementById("msg"); console.log(aAs); for (var i = 0; i < aAs.length; i++) { aAs[i].index = i; aAs[i].onmouseover = function () { oMsg.innerHTML = arr[this.index] oMsg.style.display = 'block' } aAs[i].onmouseout = function () { oMsg.style.display = "none"; } //添加鼠标移动事件 aAs[i].onmousemove = function (ev) { var e = ev || window.event; oMsg.style.left = e.clientX + 5 + "px"; oMsg.style.top = e.clientY + 5 + "px"; } } }script>head><body> <a href="#">唐太宗a> <a href="#">唐高祖a> <a href="#">武则天a> <a href="#">唐玄宗a> <div id="msg">div>body>html>当鼠标移上"唐太宗"几个字的时候，结果如下，移出时它就不显示。
事件对象有属性shiftKey、altKey、ctrlKey、metaKey，其作用是和别的快捷键进行组合,形成一些快捷键操作。
| 属性名 | 说明 |
| shiftKey | 按下shift键，为true,默认为false |
| altKey | 按下alt键 |
| ctrlKey | 按下ctrl键 |
| metaKey | windows系统下按下开始键，macos系统下按下command |
事件对象的属性 /* shiftKey 按下shift键，为true,默认为false altKey 按下alt键 ctrlKey 按下ctrl键 metaKey windows系统下按下开始键，macos系统下按下command键 【注】和别的快捷键进行组合,形成一些快捷键操作。 */ window.onload = function () { document.onmousedown = function (ev) { var e = ev || window.event; var arr = []; if (e.shiftKey) { arr.push("shift") } if (e.altKey) { arr.push("alt") } if (e.ctrlKey) { arr.push("ctrl") } if (e.metaKey) { arr.push("windows") } alert(arr) } }当我按下键盘上的alt和ctrl键点击屏幕之后，会弹出
因此可以通过这些属性判断用户按了哪些键。
除此之外还有keyCode键码属性和charCode字符码属性。
keyCode 键码
返回值：键码返回的是大写的ASCII码值，不区分大小写。
使用格式：var which = e.which || e.keyCode;
【注】只在keydown下支持。
事件对象的属性 /* keyCode 键码 返回值：键码返回的是大写的ASCII码值，不区分大小写。 使用格式：var which = e.which || e.keyCode; 【注】只在keydown下支持。 */ window.onload = function () { window.onkeydown = function (ev) { var e = ev || window.event; var which = e.which || e.keyCode; alert(which); } }当我按下键盘上的大写A和小写a时都弹出的是大写A对应的ASCII码值65，也就是不区分大写，结果一样。
charCode 字符码
返回值：字符码返回的是当下键区分大小写的ASCII码值
使用格式：var which = e.which || e.charCode;
【注】只在keypress下支持，只支持字符键，不支持ctrl,shift这些键。
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件对象的属性title> <script> /* charCode 字符码 返回值：字符码返回的是当下键区分大小写的ASCII码值 使用格式：var which = e.which || e.charCode; 【注】只在keypress下支持，只支持字符键，不支持ctrl,shift这些键。 */ window.onload = function () { window.onkeypress = function (ev) { var e = ev || window.event; var which = e.which || e.charCode; alert(which); } }script>head><body>body>html>当我按下小写的a时弹出其对应的ACSII码值97，当我按下大写的A时弹出其对应的ACSII码值65