JS—事件對象

在觸發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級，都是指向當前正在處理事件的那個元素。

列舉所有事件的事件對象，都會有的成員。

屬性方法	類型	讀寫	說明
bubbles	Blooean	只讀	表明事件是否冒泡
stopPropagation()	Function	只讀	取消事件的進一步捕獲或冒泡，如果bubbels為true，則可以使用這個方法
cancelable	Blooean	只讀	表明是否可以取消事件的默認行為
preventDefault()	Function	只讀	取消事件的默認行為，如果cancelable為true，則可以使用這個方法
currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素
target	Element	只讀	事件的目標
detail	Integar	只讀	與事件相關的細節信息
eventPhase	Integar	只讀	調用事件處理程序的階段：1表示捕獲階段2表示處於目標3表示冒泡階段
trusted	Blooean	只讀	為true表示事件是瀏覽器生成的，為false表示事件是由開發人員通過js創建的
type	String	只讀	被觸發的事件的類型
view	AbstractView	只讀	與事件關聯的抽象視圖。等同於發生事件的window對象

 

• 成員中有兩個成員比較相似：
  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 href="http://www.baidu.com/" 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級方法中：

屬性方法	類型	讀寫	說明
cancelBubble	Blooean	讀/寫	默認值為false，但將其設置為true就可以取消事件冒泡，與DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	讀/寫	默認值為true，但將其設置為fasle，就可以取消事件的默認行為，與DOM中的preventDefault()方法的作用相同
srcElement	Element	只讀	事件的目標，與DOM中的target屬性相同
type	String	只讀	被觸發的事件類型

 

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

  };