事件對象的相容

每個事件函數天生有一個參數叫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);
  }