每个事件函数天生有一个参数叫event，它是事件对象，如果想修改event的名称，事件函数的第一个参数就是用来修改的

var oDiv = document.getElementById("div");oDiv.onclick = function() {    console.dir(arguments);}; document.body.onclick = function(e) {    console.dir(e);  //MouseEvent

当我们触发#div的点击行为的时候，会执行对应绑定的方法

不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值，叫做MouseEvent，叫做鼠标事件对象，是一个对象属性类型的值

  • 它是一个对象数据类型的值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的。

    鼠标移动的坐标：

    page:针对于整个页面的左顶点 常用

    console.log("page",e.pageX,e.pageY);

    client:针对于可视窗口的左顶点 不常用

    console.log("client",e.clientX,e.clientY);

    offset:针对于父元素的左顶点 常用于拖拽

     console.log("offset",e.offsetX,e.offsetY);

    案例：跟随鼠标移动

        //事件元素:大白板    //事件类型:onmousemove    //事件对象:获取鼠标的坐标,将坐标赋值给box的left和top    // (一个元素要在页面发生位移，本质就是在修改left和top)  var oTiger = document.querySelector("#tiger");  //给整个页面绑定：鼠标移动事件  document.onmousemove = function(evt){   //兼容的方式获取event对象    var e = evt || event;    // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。    //注意，如果想通过 style.left 来设置属性，一定要给 box1开启绝对定位。    oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";    oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";}

  • MouseEvent，往上找是UIEvent，然后是Event，最后是Object，这是它的原型链

  • MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息，和到底是在哪个元素上触发的没有关系

    事件对象本身的获取存在兼容问题

    标准浏览器中是浏览器给方法传递的参数，

    我们只需要定义形参e就可以获取到。

    而IE6~8中浏览器不会给方法传递参数e，我们如果需要的话，

    在IE6，7，8下只能用window.event中获取查找

var e = evt || event;
  1. event 使用前提，必须有事件 不同的对象产生的事件不同
  2. event 代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
  3. event 对象只在事件发生的过程中才有效。
  4. event 的某些属性只对特定的事件有意义。比如，fromElement和toElement属性只对onmouseover和onmouseout事件有意义。

传进来这个e，在iE9以上才有

在IE6，7，8时，e是不会传进去的

window.event谷歌下也有，IE6，7，8下也有，但是火狐下没有window.event

所以IE6，7，8下只能用window.event

而IE9，谷歌，火狐等标准浏览器，e都是可以用的

 oDiv.onclick = function (e) {     console.dir(e);  //->IE6，7，8下是存在window.event里面的     console.dir(window.event);  }