一：什麼是UI事件？
UI事件指的是那些不一定與使用者操作有關的事件。這些事件在DOM規範出現之前，都是以其他形式存在的。在DOM規範中保留是為了向後相容。ui事件有7種
1.DOMActivate：表示已經被使用者操作過的元素。DOM3中被廢棄。Firefox和chrome可以使用。
2. load：
- 頁面完全加載後再window上面觸發；
- 當所有架構都加載完畢時在架構上面觸發；
- 當圖檔加載完畢時在元素觸發；
- 當嵌入的内容加載完畢時在元素上面觸發。
3. unload：
- 當頁面完全解除安裝後再window上面觸發；
- 當所有架構都解除安裝後再架構集上面觸發；
- 當嵌入的内容解除安裝完畢後再元素上面觸發。
4. abort：在使用者停止下載下傳過程時，如果嵌入的内容沒有加載完，則在元素上面觸發。
5. error：
- 當發生javascript錯誤時在window上面觸發；
- 當無法加載圖像時在元素上面觸發；
- 當無法加載嵌入内容時在元素上面觸發；
- 當有一或多個架構無法加載時在架構集上面觸發。
6.select：當使用者選擇文本框中(input或texterea)的一個或多個字元時觸發
7. scroll：當使用者滾動帶滾動條的元素中的内容時，在該元素上面觸發。元素包含所加載頁面的滾動條。
二：判斷浏覽器是否支援的DOM2級或DOM3級事件？
要确定浏覽器是否支援DOM2級事件規定的HTML事件(除了DOMActive之外，其他事件在DOM2中都是HTML事件)，可以這樣來寫：
//浏覽器是否支援DOM2級事件
var isSupported = document.implementation.hasFeature('HTMLEvents','2.0');
//浏覽器是否支援DOM3級事件
var isSupported2 = document.implementation.hasFeature('UIEvent','3.0');
三：每個事件的使用方法？
下面的每個測試需要加上封裝過的事件類EventUtil，位址為：http://blog.csdn.net/flyingpig2016/article/details/53392688
1.load事件？
- 給window對象綁定load事件
EventUtil.addHandler(window,'load',function(event){
console.log('Loaded!');
})
- 給文檔中的節點綁定load事件
EventUtil.addHandler(images,'load',function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getTarget(event).src);
console.log(event.target.src);
})
- 給動态加載的圖檔圖檔綁定load事件方法一：
EventUtil.addHandler(window,'load',function(){
var image = document.createElement('img');
EventUtil.addHandler(image,'load',function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getTarget(event).src);
})
document.body.appendChild(image);
image.src = '../../../../03work/Nifty/img/av3.png';
})
- 給動态加載的圖檔圖檔綁定load事件方法二：
EventUtil.addHandler(window,'load',function(){
var image = new Image();
console.log(image); //<img>
EventUtil.addHandler(image,'load',function(event){
console.log('Image loaded!');
});
image.src = '../../../../03work/Nifty/img/av1.png';
document.body.appendChild(image);
});
- 給動态加載的js檔案綁定load事件
EventUtil.addHandler(window,'load',function(event){
var scripts = document.createElement('script');
EventUtil.addHandler(scripts,'load',function(event){
console.log('js is load');
})
scripts.src = './EventUtil.js';
document.body.appendChild(scripts);
});
- 給動态加載的css檔案綁定load事件
EventUtil.addHandler(window,'load',function(){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
EventUtil.addHandler(link,'load',function(event){
console.log('css loaded');
});
link.href = './1.css';
document.getElementsByTagName('head')[].appendChild(link);
});
2.unload事件？
用的不多，是指在文檔被完全解除安裝後觸發，隻要使用者從一個頁面切換到另個頁面，就會觸發。但是利用這個事件最多的情況是清除引用，避免記憶體洩露。
EventUtil.addHandler(window,'unload',function(event){
console.log(onunload);
});
3.resize事件？
視窗大小發生變化時觸發
EventUtil.addHandler(window,'resize',function(event){
console.log('Resized');
});
4.scroll事件？
标準模式下，除了Safari基于跟蹤滾動位置，其他浏覽器都會通過
<html>
元素來反映這一變化。
EventUtil.addHandler(window,'scroll',function(event){
console.log(document.body.scrollTop);
})
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)