unload事件
與load事件對應的是unload事件,這個事件在文件被完全解除安裝後觸發,只要使用者從一個頁面切換到另一個頁面,就會發生unload事件,最多的情況是清除引用,避免記憶體洩漏
與load事件類似,也有兩種指定onunload事件的處理程式方式
EventUtil.addHandler(window,"unload",function(event){
alert("Unloaded");
});
為元素新增特性
<body onunload="alert('Unloaded!')">
根據“DOM2級事件”,應該<body>元素而非window物件上面觸發unload事件,不過所有瀏覽器都在window上實現了unload事件,以確保向後相容
resize事件
當瀏覽器視窗被調整寬度或者高度時,就會觸發resize事件,同樣2種方式
EventUtil.addHandler(window,"resize",function(event){
alert("Resized");
});
IE、Safari、Chrome和Opera會在瀏覽器變化1畫素時就觸發resize事件,然後隨變化不斷觸發,Firefox則是在停止變化後觸發事件,所以要避免大量的計算
瀏覽器最大化最小化也會觸發resize事件
scroll事件
scroll事件在window物件上發生,實際表示的是頁面中相應元素的變化,在混雜模式下可以通過<body>元素的scrollLeft和scrollTop來監控這一變化;而在標準模式下,除Safari之外的所有瀏覽器都會通過<html>元素反映這一變化
EventUtil.addHandler(window,"scroll",function(event){
if(document.compatMode=="CSS1Compat"){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
});
這個事件同樣應避免大量計算
焦點事件
焦點事件會在頁面獲得或失去焦點時觸發,有以下6個焦點事件
blur:在元素失去焦點時觸發,這個事件不會冒泡,所有瀏覽器都支援它
focus:在元素獲得焦點時觸發,這個事件不會冒泡,所有瀏覽器都支援它
DOMFocusIn:在元素獲得焦點時觸發,DOM3級事件已廢棄,只有Opera支援這個事件
DOMFocusOut:在元素失去焦點時觸發,DOM3級事件已廢棄,只有Opera支援這個事件
focusin:在元素獲得焦點時觸發,這個事件與HTML事件focus等價,但它冒泡,IE5.5+、Safari5.1+、Opera11.5+和Chrome支援
focusout:在元素失去焦點時觸發,這個事件與HTML事件blur等價,但它冒泡,IE5.5+、Safari5.1+、Opera11.5+和Chrome支援
blur和focus不冒泡是最大的問題,IE的方式被DOM3級事件採納為標準方式
當焦點從頁面中的一個元素移動到另一個元素,會依次觸發下列事件:
focusout→focusin→blur→DOMFocusOut→focus→DOMFocusIn
滑鼠與滾輪事件
滑鼠事件是Web開發中最常用的一類事件,DOM3級事件中定義了9個滑鼠事件
click:滑鼠單擊左鍵或鍵盤迴車鍵
dblclick:滑鼠雙擊左鍵DOM3級將其納入了規範,
mousedown:按下任意滑鼠按鈕時觸發,不支援鍵盤觸發
mouseenter:滑鼠游標從元素外部首次移動到元素範圍內時觸發,該事件不冒泡。DOM3級將其納入了規範,IE、Firefox9+和Opera支援這個事件
mouseleave:滑鼠游標從元素上方移動到元素範圍外時觸發,該事件不冒泡。DOM3級將其納入了規範,IE、Firefox9+和Opera支援這個事件
mousemove:滑鼠指標在元素內部移動時重複地觸發,不支援鍵盤觸發
mouseout:滑鼠指標位於元素上方,使用者將其移入另一個元素時觸發,另一個元素可能位於前一個元素的外部也可能是這個元素的子元素,不支援鍵盤觸發
mouseover:滑鼠指標位於一個元素外部,然後使用者將其首次移入另一個元素邊界之內時觸發,不支援鍵盤觸發
mouseup:釋放滑鼠按鈕時觸發,不支援鍵盤觸發
上面的事件除了mouseleave和mouseenter,其餘都會冒泡,也可以被取消,取消滑鼠事件將會影響瀏覽器的預設行為
事件與事件之間的聯絡非常緊密
mousedown→mouseup→click→mousedown→mouseup→click→dblclick
IE8及之前版本有個BUG,IE9修復了該BUG
mousedown→mouseup→click→mouseup→dblclick
檢測瀏覽器是否支援DOM2級事件(除dblclick、mouseenter和mouseleave之外)
var isSupported=document.implementation.hasFeature("MouseEvents","2.0");
檢測瀏覽器是否支援以上所有事件
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
注意:DOM3級事件的feature名是"MouseEvent",而非"MouseEvents"
滑鼠還有一類滾輪事件,mousewheel事件,用於跟蹤滑鼠滾輪