● 什么是事件对象？就是当你触发一个事件以后，对该事件的一些描述信息
● 例如：
○ 你触发一个点击事件时，你点了哪个位置，坐标多少，都在事件对象的属性中体现
○ 你触发一个键盘事件时，你按下的是哪个按钮，事件对象里的属性就能体现
○ ...
● 每个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
● 下面拿键盘抬起事件和点击事件举例，了解怎么获得事件对象以及事件对象的作用：
○ 键盘抬起：
<body><input type="text" id="username"><script>username.onkeyup = function(evt){console.log(evt)}</script>
</body>结果：
解释说明：我们给input绑了一个键盘抬起事件，当鼠标抬起就会触发事件，但是缺少一个接收这个触发事件信息的对象，如果没有这个对象，我们就不知道你到底按了然后抬起了哪个键，我们需要有一个事件对象来存储这个信息，所以给函数传递了一个形参“evt”，到时候传一个实参，这个实参就是事件对象，所以事件对象就是这个“evt”型材传过来的，我们打印一个这个形参（传过来的事件对象） 的结果，发现我在界面上用键盘输入一个a，并抬起键盘，结果就打印输出关于此时键盘操作的信息，看红框里的东西，key=“a”，keyCode=65，这个事件就记录了我们抬起了a键，keyCode=65，这就是事件对象的作用。
○ 所以当我们直接调用事件里面的keyCode的值，就知道键盘打印的是哪个键了（每个键都有对应的keyCode值）：
<body><input type="text" id="username"><script>username.onkeyup = function(evt){console.log(evt.keyCode)}</script>
</body>结果：
结果解释：在输入框里我输入了a--b--c--Enter，所以它们对应的keyCode值分别是：65、66、67、13，所以“Enter”键的keyCode值是“13”，所以我们就可以通过判断keyCode是否等于13，就可以判断出用户是否按下了回车键。
<body><input type="text" id="username"><script>username.onkeyup = function(evt){console.log(evt.keyCode)if(evt.keyCode===13){console.log("Enter,创建节点")}}</script>
</body>
○ 点击事件：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: aquamarine;}</style>
</head>
<body><div id="obox">111</div><script>obox.onclick = function(evt){console.log(evt)}</script>
</body>结果：
当你每次点击时，它就会记录你的点击的位置，可以参考clientX，clientY或者offsetX,offsetY或者pageX，pageY。。
● clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
clientX, clientY：指的是鼠标点击位置距离可视窗口的坐标；
图示：在不拉滚动条的情况下
在拉滚动条的情况下： 还是点击位置距离可视窗口左上角的距离
pageX, pageY：指的是距离页面左上角的距离，就是当你拉滚动条时，距离值也不变
图示：当你没拉滚动条时，此时点击页面左上角也就是窗口的左上角，所以当你没拉滚动条，距离就是下面图的距离；但是当你拉了滚动条，页面也就上去了，此时页面左上角不等于窗口左上角，而这个pageX, pageY是距离页面左上角的距离，当你点击同一个位置，这个坐标是不变的。
offsetX, offsetY：距离触发元素左上角的坐标值
图示：
