event对象

event对象

当给某个元素加上事件绑定函数之后，事件函数在调用时默认的第一个参数就是事件对象。这个事件对象会记录事件相关的信息。类似飞机里面黑匣子的意思，这样会好理解一些。 那么，事件对象中会包含多少关于事件的信息呢！用for in循环来看看有多少。嗯……数量还是有些惊人的。

全部都玩一下肯定不可能，今天来玩玩clientX和clientY。这两个属性指的是当事件发生的时候，鼠标到页面可视区的距离。

一个简单的小热身，鼠标点击页面任意位置，弹出鼠标点击时具体位置。左上角的位置为（0，0）。

试想，如果把clientX和clientY的值给页面中的DOM元素的top和left值，在两个值在不断变化的时候，那么页面中的DOM元素是不是就可以随之而变呢！如下代码。有一个问题就是，当页面高度增加时，出现滚动条。clientY的值如果等于页面中DOM元素的top值，那么鼠标的位置和DOM元素的位置就会有差距，这个距离正好就是滚动条所滚动的距离，所以需要加上滚动条所滚动的距离。