13. 事件对象的兼容

事件对象的兼容：

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

<div id="div"></div>

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);
  

  案例：跟随鼠标移动

  <script>
      //事件元素:大白板
      //事件类型: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);
  }