DOM3級事件包括以下幾類事件：
- UI事件：當(dāng)用戶與頁面上的元素交互時觸發(fā)
- 焦點事件：當(dāng)元素獲得或失去焦點時觸發(fā)
- 鼠標(biāo)事件：當(dāng)用戶通過鼠標(biāo)在頁面上執(zhí)行操作時觸發(fā)
- 滾輪事件：當(dāng)使用鼠標(biāo)滾輪時觸發(fā)
- 文本事件：當(dāng)在文檔中輸入文本時觸發(fā)
- 鍵盤事件：當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)
- 合成事件：當(dāng)為IME(輸入法編輯器)輸入字符時觸發(fā)
- 變動事件：當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)
UI事件
包括以下事件：
1.load事件
當(dāng)頁面完全加載后（包括所有圖像、js文件、css文件等外部資源）在window上面觸發(fā)；當(dāng)所有框架都加載完畢時在框架集上面觸發(fā)；當(dāng)圖像加載完畢時在<img>元素上面觸發(fā)；當(dāng)嵌入內(nèi)容加載完畢時在<object>元素上觸發(fā)。
兩種定義onload事件處理程序的方式：
(1) js代碼
(2) 為<body>元素添加一個onload屬性
/*第一種方式*/
EventUtil.addHandler(window,"load",function(event){
//進(jìn)行相應(yīng)的操作
})
/*第二種方式*/
<body onload="相應(yīng)操作"></body>
1.1 圖像上觸發(fā)load事件
/*方式1*/
/*方式2*/
var image = document.getElementById("myImage");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
在創(chuàng)建新的<img>元素時，可以為其指定一個事件處理程序，以便圖像加載完之后給出提示，但是重要的是在指定src屬性之前先指定事件，如下：
/*為window指定事件，確保在document.body不會出錯，頁面已經(jīng)完全加載*/
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
//指定src之前先指定事件
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
注意：新圖像元素不一定要從添加到文檔后才開始下載，只要設(shè)置了src屬性就會開始下載。
1.2 <script>元素、<link>元素觸發(fā)load事件
確定動態(tài)加載的js問價時候加載完畢，注意：與圖像不同，只有設(shè)置了src屬性并將新元素添加到文檔后，才開始下載，所以對<script>元素來說，指定src屬性和指定事件處理程序的先后順序是不重要的。
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
})
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
2. unload事件
與load事件對應(yīng)，在文檔被完全卸載后觸發(fā)，只要用戶從一個頁面切換到另一個頁面，就會發(fā)生unload事件。該事件用的最多的就是清除引用，以避免內(nèi)存泄漏。
/*第一種方式*/
EventUtil.addHandler(window,"unload",function(event){
//進(jìn)行相應(yīng)的操作
})
/*第二種方式*/
<body onunload="相應(yīng)操作"></body>
unload事件是在一切都被卸載之后才觸發(fā)的，那么在頁面加載后存在的那些對象此時就不一定存在了，所以此時再操作DOM節(jié)點或元素的樣式就會導(dǎo)致錯誤。
3.resize事件
當(dāng)瀏覽器窗口被調(diào)整到一個新的高度或者寬度時，就會觸發(fā)resize事件，該事件在window（窗口）上面觸發(fā)，因此可以通過JavaScript或者<body>元素中的onresize特性來指定事件處理程序，推薦的JavaScript方式如下：
EventUtil.addHandler(window,"resize",function(event){});
//傳入的event對象有一個target屬性，值為document
關(guān)于何時觸發(fā)resize事件不同瀏覽器有不同的機(jī)制，所以不要在這個事件的處理程序中加入大量的代碼。
4.scroll事件
該事件是在window對象上發(fā)生的，但它實際表示的是頁面中相應(yīng)元素的變化：
- 混雜模式下：通過<body>元素的scrollLeft和scrollTop來監(jiān)控到這一變化。
- 標(biāo)準(zhǔn)模式下：通過<html>元素來反映這一變化（除了Safari，Safari仍然基于<body>跟蹤滾動位置）
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){ //標(biāo)準(zhǔn)模式下
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
與resize事件類似，scroll事件會在文檔被滾動期間重復(fù)被觸發(fā)，所以盡量保持事件處理程序代碼簡單。
焦點事件
焦點事件會在頁面元素獲得或失去焦點時觸發(fā)，利用這些時間并與document.hasFocus()方法及document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤。有6個焦點事件：
- blur：在元素失去焦點時觸發(fā)，該事件不會冒泡，所有瀏覽器都支持。
- focus：在元素獲得焦點時觸發(fā)，該事件不會冒泡，所有瀏覽器都支持。
- focusin：與focus事件等價，但是它冒泡。
- focusout：是HTML事件blur的通用版本。
