js高級程序設計筆記8--事件

2024-04-27 15:07:05

字體：大中小

來源：轉載

供稿：網友

事件流

描述的是從頁面中接收事件的順序。IE和Netscape開發團隊提出了差不多完全相反的事件流的概念。

事件冒泡(IE)

事件開始時由最具體的元素接收，然后逐級向上播到較為不具體的節點（文檔）.

事件捕獲（Netscape)

其思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。 “DOM2級事件”規范要求事件應該從document對象開始傳播，但很多瀏覽器都是從window對象開始捕獲事件的。由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。

DOM2級事件流

包括3個階段：事件捕獲階段，處于目標階段和事件冒泡階段。首先捕獲事件，然后是實際的目標接收到事件。最后是冒泡階段，可以在這個階段對事件做出響應。

事件處理程序

可以通過函數中的局部變量event訪問事件對象。

this值等于事件的目標元素。

DOM0級事件處理程序：將一個函數賦值給一個事件處理程序屬性。

btn.onclick=function(){...}

DOM2級事件處理程序：定義了兩個方法用于指定和刪除事件處理程序：addEventListener(),removeEventListener()。他們都接收三個參數：要處理的事件名，作為事件處理程序的函數和一個布爾值。(如果為true表示在捕獲階段調用事件處理程序，為false在冒泡階段調用事件處理程序)

btn.addEventListener("click",function(){alert(this.id);},false);

IE事件處理程序

IE實現了與DOM類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱和事件處理程序函數。添加的事件處理程序都會被添加到冒泡階段。

btn.attachEvent("onclick",function(){...});

注：是onclick而不是DOM的addEventLIstener的click. 在IE中使用attachEvent()與使用DOM0級方法的主要區別在與事件處理程序的作用域。在使用DOM0級方法時，事件處理程序會在其所屬元素的作用域內運行；在使用attachEvent()方法時，事件處理程序會在全局作用域中運行，因此this等于window。

btn.attachEvent("onclick",function(){ alert(this === window)//true});

跨瀏覽器的事件處理程序

事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event.

event.PReventDefault():阻止事件的默認行為。 evnet.stopPropagation()；立即阻止事件在DOM層次中的傳播。 event.evnetPhase:事件發生的階段。

IE中的事件對象

訪問IE中的event對象有幾種不同的方式。在使用DOM0級方法添加處理程序時，event對象作為window對象的一個屬性存在。

btn.onclick = function(){ var event = window.event; alert(event.type);};

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

btn.attachEvent("onclick",function(event){alert(event.type);})

IE中的事件具有如下包含如下屬性和方法： cancelBubble:默認值為false,將其設置為true可以取消事件冒泡。（與DOM的stopPropagation()相同） returnValue:默認值為true,將其設置為false可以取消事件的默認行為。(與DOM的preventDefault相同) srcElement:事件的目標（與DOM中的targer屬性相同）

跨瀏覽器的事件對象

事件類型

UI事件

load事件。當頁面加載后（包括所有圖像，js文件，CSS文件等外部資源），就會觸發load事件。根據“DOM2級事件”規范，應該在document而非window上面觸發load事件，但是所有瀏覽器都在window上實現了該事件，以確保向后兼容。unload事件。在文檔被完全卸載后觸發。只要用戶從一個頁面切換到另一個頁面，就會觸發unload事件。利用這個事件最多的情況是清楚引用，避免內存泄漏。resize事件。當瀏覽器窗口被調整到一個新的高度或寬度時，就會觸發resize事件。何時觸發resize事件不同瀏覽器有不同的機制。IE，Safari，Chrome,Opera會在瀏覽器窗口變化了1像素時就觸發resize事件，而Firefox則會在用戶停止調整窗口大小時才會觸發。scroll事件 scroll事件是在window對象上發生的，當它實際上表示的則是頁面中相應元素的變化。

鼠標與滾輪事件

click:鼠標單擊 dblclick:鼠標雙擊 mousedown:鼠標按下時觸發 mouseenter:在鼠標光標從元素外部首次移動到元素范圍之內時觸發。此事件不會冒泡。 mouseleave:在位于元素上方的鼠標光標移動到元素范圍之外時觸發。此事件不會冒泡。 mousemove:當鼠標指針在元素內部移動時重復的觸發。 mouSEOut:在鼠標指針位于一個元素上方，然后用戶將其首次移入另一個元素時觸發。 mouseover:在鼠標指針位于一個元素外部，然年用戶將其首次移入另一個元素邊界之內時觸發。 mouseup:釋放鼠標按鈕時觸發。

DOM通過event對象的relatedTarget屬性提供了相關元素的信息。這個屬性只對于mouseover和mouseout事件才包含值。IE8及之前版本不支持這個屬性。在IE8中，mouseover事件觸發時，fromElement屬性保存相關元素。mouseout事件觸發時，toElement屬性保存著相關元素。

鍵盤與文本事件

keydown:按下鍵盤 keypress:當用戶按下鍵盤上的字符鍵時觸發。 keyup:釋放鍵盤上的鍵 1.鍵碼：event對象的keyCode屬性會包含一個代碼，與鍵盤上一個特定的鍵對應。對于數字字母鍵，keyCode的屬性值與ASCII碼只能怪對應小寫字母或數字的編碼相同。 2. 字符編碼按下能夠插入或刪除字符的鍵都會觸發keypress事件。按下其他鍵能夠觸發此事件因瀏覽器而異。event對象有個charCode事件。這個屬性只有在發生keypress事件時才包含。而且這個值是按下的鍵所代表字符的ASCII編碼。IE8及其之前版本和Opera則是在keyCode保存ASCII碼。

var EventUtil = { getCharCode:function(event){ if(typeof event.charCode == "number"){ reutrn event.charCode; }else{ return event.keyCode; } }}

DOM3級變化

DOM3級的鍵盤事件不再包含charCode屬性。而是兩個新屬性key和char. key的值為一個字符串。為相應鍵的文本字符。而char的值按下字符鍵時的行為與key相同。但是按下非字符鍵時返回null. IE9支持key屬性，但不支持char屬性。Sarari5和Chrome支持名為keyIdentifier的屬性。在按下非字符鍵時（例如shift）時與key相同，對于字符鍵，keyIdentifier返回一個格式“U+0000”的字符串，類似Unicode值。