JavaScript事件對象詳解

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

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

所有瀏覽器都支持event對象,event對象會傳入DOM0級,DOM2級,HTML指定的事件處理程序中,但支持的方式不同,所以也會涉及跨瀏覽器的部分。我們可以結(jié)合HTML DOM Event 對象來學習。
我們知道,特定的事件會有自己獨特的屬性,我們這里只看一些共有的屬性


1.標準瀏覽器

event:在支持至少DOM2級的瀏覽器內(nèi),無論使用html特性指定,dom0級,2級,該對象都是該事件內(nèi)置對象,可以在事件處理函數(shù)內(nèi)直接使用。
this:在支持至少DOM2級的瀏覽器內(nèi),無論使用html特性指定,dom0級,2級,都是指向當前正在處理事件的那個元素。
列舉所有事件的事件對象,都會有的成員。

列舉所有事件的事件對象,共同擁有的成員。

屬性方法 類型 讀寫 描述
bubbles Blooean 只讀 表明事件是否是起泡事件類型
cancelable Blooean 只讀 表明是否可以取消事件的默認行為
currentTarget Element 只讀 其事件處理程序當前正在處理事件的那個元素
target Element 只讀 事件的目標
eventPhase Integar 只讀 調(diào)用事件處理程序的階段:1表示捕獲階段2表示處于目標3表示冒泡階段
trusted Blooean 只讀 為true表示事件是瀏覽器生成的,為false表示事件是由開發(fā)人員通過js創(chuàng)建的
type String 只讀 被觸發(fā)的事件的類型
stopPropagation() Function 只讀 取消事件的進一步捕獲或冒泡,如果bubbels為true,則可以使用這個方法
preventDefault() Function 只讀 取消事件的默認行為,如果cancelable為true,則可以使用這個方法
initEvent() Event 只讀 初始化新創(chuàng)建的 Event 對象的屬性
  • currentTarget:始終等于this對象,隨著事件冒泡或者捕獲,他的值等于捕獲或冒泡到的上級元素。

  • target :觸發(fā)此事件的元素。

  • type
    可以利用type屬性為一個元素同時添加多類事件處理程序。
    采用dom0級測試

var btn=document.getElementById('myBtn');
 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;
  • eventPahse
    用來確定事件當前位于事件流的哪個階段
var btn=document.getElementById('Mybtn');//body內(nèi)的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捕獲
  • cancelable、preventDefault()
    只有cancelable為true時,才可以使用preventDefault()方法,來取消其默認行為。
    ie低版本通過:event.returnValue=false來實現(xiàn)
<a  id="myherf">百度</a>
  var Link=document.getElementById("myherf");
  Link.onclick=function(){
     event.preventDefault();
  }

這樣單擊百度時,并不會跳轉(zhuǎn)到百度的頁面。

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

event對象只有在事件處理程序執(zhí)行期間,才會存在,執(zhí)行完畢即銷毀。


2.IE中的事件對象

在IE8及其以前版本的瀏覽器是不兼容DOM2級的,但是還是可以使用dom0級的方法和自帶的方法添加事件處理程序。
event:

var div=document.getElementById("test");
  div.onclick=function(){
      var event=window.event; //event為window對象
      alert(event.type);
  }

event 對象必須作為 window 對象的一個屬性。event對象作為事件處理程序的內(nèi)部對象??梢灾苯邮褂胑vent.type。
html指定:event對象同樣也包含于創(chuàng)建他的事件相關(guān)的屬性和方法。

this:
html指定
html標簽上直接使用this,那么等于正在處理事件的那個元素。如果是使用標簽上指定函數(shù),那么函數(shù)內(nèi)的this指的是window。
dom0級方法中
this等于正在處理事件的那個元素。
使用IE的專屬 attachEvent()
this等于window

  • IE的event包含的對象與方法
屬性方法 類型 讀寫 說明
cancelBubble Blooean 讀/寫 默認值為false,但將其設置為true就可以取消事件冒泡,與DOM中stopPropagation()的方法作用相同
returnvalue Blooean 讀/寫 默認值為true,但將其設置為fasle,就可以取消事件的默認行為,與DOM中的preventDefault()方法的作用相同
srcElement Element 只讀 事件的目標,與DOM中的target屬性相同
  • 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及以前只支持冒泡所以只能取消冒泡。

既然事件對象存在瀏覽器兼容問題,那么封裝一個跨瀏覽器的事件對象就很有必要!
跨瀏覽器的事件對象我在前面的JavaScript事件——事件冒泡,事件捕獲,事件綁定與解綁,事件委托的文章末尾已經(jīng)給出過了。

謝謝觀看?。?!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容