事件對象

在觸發(fā)DOM上的某個事件時，會產(chǎn)生一個事件對象event，這個對象中包含著所有與事件有關(guān)的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。所有的瀏覽器都支持event對象，但支持方式不同。

DOM中的事件對象

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性方法就不一樣。不過，所有的事件都會有下表列出的成員。

• bubbles: 返回布爾值，指示事件是否是起泡事件類型。
• cancelable: 返回布爾值，指示事件是否可擁可取消的默認動作。
• currentTarget: 返回其事件監(jiān)聽器觸發(fā)該事件的元素。
• eventPhase: 返回事件傳播的當前階段。
• target: 返回觸發(fā)此事件的元素（事件的目標節(jié)點）。
• type: 返回當前 Event 對象表示的事件的名稱。
• initEvent(): 初始化新創(chuàng)建的 Event 對象的屬性。
• preventDefault(): 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作。
• stopPropagation(): 不再派發(fā)事件。

this、currentTarget、target

在事件處理程序的內(nèi)部，對象this始終等于currentTarget的值，而target則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則this、currentTarget和target包含相同的值。如：

var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert(event.currentTarget === this);  //true
    alert(event.target === this); //true 
  }

由于click事件的目標是btn按鈕，所以這三個值是相等的。如果事件處理程序在按鈕的父節(jié)點（document.body）中，那么這些值則不相同。如：

var body = document.body;
  body.onclick = function(event){
    alert(event.currentTarget === document.body);  //true
    alert(this === document.body);  //true
    alert(event.target === document.getElementById('btn')); //true
  }

在這里，this和currentTarget都是document.body，因為事件處理程序是注冊到這個元素上的。但是target元素卻等于按鈕元素，因為它是click事件的真正目標。由于按鈕并沒有注冊事件處理程序，結(jié)果click事件就冒泡到了document.body，在那里事件才能得到處理。

type

在需要通過一個函數(shù)處理多個事件時，可以使用type屬性。如：

var btn = document.getElementById('btn');
//設(shè)置多個事件
  var handler = function(event){
//獲取事件的類型
    switch(event.type){
      case 'click':{
        alert('click');
        break;
      }
      case 'mouseover':{
        event.target.style.backgroundColor = 'green';
        break;
      }
      case 'mouseout':{
        event.target.style.backgroundColor = 'gray';
        break;
      }
    }
  }
//給響應的事件賦值
  btn.onclick = handler;
  btn.onmouseover = handler;
  btn.onmouseout = handler;

這里通過event.type屬性，讓函數(shù)能夠確定發(fā)生了什么事件，并執(zhí)行相應的操作。

preventDefault()

要阻止特定事件的默認行為，可以使用該方法。如：

var link = document.getElementById('link');
  link.onclick = function(event){
    event.preventDefault();
  }

只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來取消其默認行為。

stopPropagation()

stopPropagation()用于立即停止事件在DOM層次中的傳播，即取消進一步的事件捕獲或冒泡。例如，直接添加到一個按鈕的事件處理程序可以調(diào)用該方法，從而避免觸發(fā)注冊在document.body上面的事件處理程序。如：

var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert('click button');
    event.stopPropagation();
  }
  document.body.onclick = function(event){
    alert('click body');
  }
//點擊一下的結(jié)果是：
//click button

eventPhase

該屬性用來確定事件當前正位于事件流的哪個階段。

• 如果是捕獲階段則等于1；
• 如果是目標對象階段則等于2；
• 如果是冒泡階段則等于3；

var btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert(event.eventPhase);
  }
  document.body.addEventListener('click',function(event){
    alert(event.eventPhase);
  },true)
  document.body.onclick = function(event){
    alert(event.eventPhase);
  }
//點擊一下的結(jié)果是：
//1
//2
//3

只有在事件處理程序執(zhí)行期間，event對象才會存在；一旦事件處理程序執(zhí)行完成，event對象就會被銷毀。

IE中的事件對象

與訪問的DOM中的event對象不同，邀訪問IE中的event對象有幾種不同的方式，取決于指定事件處理程序的方法。

DOM0級方法

在使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在。如：

var btn = document.getElementById('btn');
  btn.onclick = function(){
    //獲取event對象
    var event = window.event;  
    alert(event.type);  //'click"
  }

IE事件處理程序

如果事件處理程序時使用attachEvent()添加的，那么就會有一個event對象作為參數(shù)被傳入事件處理程序中。如下：

var btn = document.getElementById('btn');
  btn.attachEvent("onclick",function(event){
    alert(event.type);
  })

HTML特性

通過HTML特性指定的事件處理程序，可以通過一個叫event的變量來訪問event對象。如：

<button type="button" id="btn" onclick="alert(event.type)">click me</button>

event對象也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性方法就不一樣。不過，所有的事件都會有下表列出的成員。

• cancelable: 返回布爾值，指示事件是否可擁可取消的默認動作。
• returnValue：取消事件的默認行為
• srcElement：事件的目標
• type: 返回當前 Event 對象表示的事件的名稱。

srcElement

因為事件處理程序的作用域是根據(jù)指定它的方式來確定的，所以不能認為this會始終等于事件目標。故而，最好還是使用event.srcElement比較保險。比如：

var btn = document.getElementById('btn');
  btn.onclick = function(){
    alert(window.event.srcElement === this)  //true
  }
  btn.attactEvent('onclick',function(event){
    alert(event.srcElement === this);  //false
  })

returnValue

returnValue想當與DOM中的 preventDefault()方法，它們的作用都是取消給定事件的默認事件。只要將returnValue設(shè)置為false，就可以阻止默認行為。

var link = document.getElementById('link');
  link.onclick = function(event){
    window.event.returnValue = false;
  }

與DOM不同的是，在此沒辦法確定事件是否被取消。

cancelBubble

cancelBubble屬性和DOM中的stopPropagation()方法相同，都是用來停止事件冒泡的。由于IE不支持事件捕獲，因此只能取消冒泡事件。

ar btn = document.getElementById('btn');
  btn.onclick = function(event){
    alert('click button');
    window.event.cancelBubble = true;
  }
  document.body.onclick = function(event){
    alert('click body');
  }
//點擊一下的結(jié)果是：
//‘click button

跨瀏覽器的事件對象

window.onload = function(){
  var EventUtil = {
     addHandler:function(element,type,handler){
                    if(element.addEventListener){
                        element.addEventListener(type,handler,false)
                    }else if(element.addEvent){
                        element.attachEvent('on'+type,handler,false)
                    }else{
                        element['on'+type] = handler;
                    }
    },
    getEvent:function(event){
      return event ? event : window.event;
    },
    getTarget:function(event){
      return event.target || event.srcElement;
    },
    preventDefault:function(event){
      if(event.preventDefault){
        event.preventDefault();
      }else{
        event.returnValue = false;
      }
    },
    removeHandler:function(element,type,handler){
                    if(element.addEventListener){
                        element.removeEventListener(type,handler,false)
                    }else if(element.addEvent){
                        element.detachEvent('on'+type,handler,false)
                    }else{
                        element['on'+type] = null;
                    }
    },
    stopPropagation:function(event){
      if(event.stopPropagation){
        event.stopPropagation();
      }
      else{
        event.cancelBubble = true;
      }
    }
  }
  var btn = document.getElementById('btn');
  btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    alert(event);
  }
  btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    alert(target);
  }
}