在觸發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; } } };