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事件,用於跟蹤滑鼠滾輪