在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含著所有與事件有關的信息。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。

• 舉例
  鼠標操作導致的事件對象中，會包含鼠標位置的信息，
  鍵盤操作導致的事件對象中，會包含按下的鍵有關的信息，

所有瀏覽器都支持event對象，event對象會傳入DOM0級，DOM2級，HTML指定，的事件處理程序中，但支持的方式不同，所以也會涉及跨瀏覽器的部分。

• 兼容DOM的瀏覽器
  function handler(){
  alert(event.type);
  };
  EventUtil.addHandler(btn,'click',handler);//接上篇筆記
  event：在支持至少DOM2級的瀏覽器內，無論使用html特性指定，dom0級，2級，該對象都是該事件內置對象，可以在事件處理函數內直接使用。
  this：在支持至少DOM2級的瀏覽器內，無論使用html特性指定，dom0級，2級，都是指向當前正在處理事件的那個元素。
• 列舉所有事件的事件對象，都會有的成員。

• • • 成員中有兩個成員比較相似：
      currentTarget:this對象始終等于他的值，隨著事件冒泡或者捕獲，他得值等于捕獲或冒泡到的上級元素的值。
      target：只包含事件的實際目標。

  • type
    可以利用type屬性為一個元素同時添加多類事件處理程序。
    采用dom0級試試
    var btn=document.getElementById('d1');
    var handler=function(){
    switch(event.type){
    case "click":
    alert("clicked");
    break;

           case "mouseover":
               event.target.style.background='red';
               break;
           case "mouseout":
               event.target.style.background='yellow';
               break;
       }
     };
     btn.onclick=handler;
     btn.onmouseover=handler;
     btn.onmouseout=handler;
    

  • cancelable、preventDefault()
    只有cancelable為true時，才可以使用preventDefault()方法，來取消其默認行為。
    <a id="myherf">百度</a>
    var Link=document.getElementById("myherf");
    Link.onclick=function(){
    event.preventDefault();
    }
    這樣單擊百度時，并不會跳轉到百度的頁面。

  • stopPropagation()
    立即停止事件在dom層次中的傳播，即取消進一步的事件捕獲或冒泡。
    function handler(){
    alert(event.type);
    event.stopPropagation();
    };

  • eventPahse
    用來確定事件當前位于事件流的哪個階段
    var btn=document.getElementById('d1');//body內的div
    var wrap=document.getElementById('wrap');//body
    function handler(){
    alert(event.eventPhase)
    };
    //單擊btn
    btn.addEventListener('click',handler,false);//2處于目標對象
    wrap.addEventListener('click',handler,false);//3冒泡階段
    wrap.addEventListener('click',handler,true);//1捕獲
    event對象只有在事件處理程序執行期間，才會存在，執行完畢即銷毀。

• IE中的事件對象
  在IE8及其以前版本的瀏覽器是不兼容DOM2級的，但是還是可以使用dom0級的方法添加事件處理程序。
• event
  • dom0級方法中：
    var div=document.getElementById("test");
    div.onclick=function(){
    var event=window.event;//event為window對象
    alert(event.type);
    }
  • 使用IE的專屬添加事件的方法，event對象作為事件處理程序的內部對象。可以直接使用event.type。
  • html指定：event對象同樣也包含于創建他的事件相關的屬性和方法。
• this
  • dom0級方法中
    this等于正在處理事件的那個元素。
  • 使用IE的專屬
    this等于全局對象
  • html指定
    如果是在標簽上直接使用this，那么等于正在處理事件的那個元素。如果是使用標簽上指定函數，那么函數內的this指的是window。

看到了分歧，結果是必然要編寫一個可以跨瀏覽器的。

• IE的event包含的對象與方法

• • returnvalue
    var div=document.getElementById("test");
    div.onclick=function(){
    window.event.returnValue=false;
    }
    但是沒有辦法判定默認事件能否被取消。
• cancelBubble
  var div=document.getElementById("test");
  div.onclick=function(){
  alert('ok')
  window.event.cancelBubble=true;
  }
  因為IE8及以前只支持冒泡所以只能取消冒泡。

• 跨瀏覽器的事件對象
  這個面試會問道的，寫一個通用的事件偵聽函數！就寫下面的就可以！bingo！
  var EventUtil={
  getEvent:function(event){
  return event||window.event;
  },
  getTarget:function(event){
  return event.target||event.srcElement;
  },
  preventDefault:function(){
  if(event.preventDefault){
  event.preventDefault();
  }else{
  event.returnValue=false;
  }
  },
  stopPropagation:function(){
  if(event.stopPropagation){
  event.stopPropagation();
  }else{
  event.cancelBubble=true;
  }
  },
  addHandler:function(element,type,handler){
  if(element.addEventListener){
  element.addEventListener(type,handler,false);
  }else if(element.attachEvent){
  element["e"+type]=function(){
  handler.call(element)
  }
  element.attachEvent("on"+type,element["e"+type]);
  }else{
  element["on"+type]=handler;
  }
  },
  removeHandler:function(element,type,handler){
  if(element.removeEventListener){
  element.removeEventListener(type,handler,false);
  }else if(element.detachEvent){
  element.detachEvent("on"+type,element["e"+type]);
  element["e"+type]=null;
  }else{
  element["on"+type]=null;
  }
  }

    };