UI Events 用戶界面事件

更新時(shí)間：2012年06月27日 10:33:23 作者：

UI即User Interface（用戶界面）的簡稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)

UI Events并不是直接與用戶行為相關(guān)，UI Event 包括如下：

　　DomActivate：當(dāng)元素被用戶的某些行為激活時(shí)，觸發(fā)該事件，例如用戶的鼠標(biāo)或者鍵盤事件。這一事件在DOM3級(jí)事件中被廢棄了，F(xiàn)F2+和chrome支持，猶豫跨瀏覽器實(shí)現(xiàn)機(jī)制的不同，不推薦使用這個(gè)事件。

　　load：在window對(duì)象上觸發(fā)是當(dāng)頁面加載完畢之后觸發(fā)的，在frameset 是當(dāng)所有的frames都加載完畢之后觸發(fā)，當(dāng)指img標(biāo)簽時(shí)，是指圖片加載完畢之后等等。

　　unload：在window對(duì)象上觸發(fā)是當(dāng)頁面卸載完畢之后觸發(fā)的，在frameset 是當(dāng)所有的frames都卸載完畢之后觸發(fā)，當(dāng)指img標(biāo)簽時(shí)，是指圖片卸載完畢之后等等。

　　abort：當(dāng)一個(gè)元素沒有完全加載完，在用戶停止了下載操作之前，而觸發(fā)。

　　error：當(dāng)window的javascript發(fā)生錯(cuò)誤時(shí)觸發(fā)，當(dāng)img不能加載是觸發(fā)，或者object元素不能被加載時(shí)觸發(fā)，當(dāng)frameset中的一個(gè)或多個(gè)frame不能被加載時(shí)觸發(fā)，
　　select：當(dāng)用戶選擇textbox中一個(gè)或多個(gè)字符時(shí)觸發(fā)該事件。
　　resize：當(dāng)window或者frame被改變大小的時(shí)候觸發(fā)。
　　scroll：當(dāng)用戶滾動(dòng)一個(gè)帶滾動(dòng)條的元素時(shí)觸發(fā)。
　　絕大多數(shù)的HTML事件，要么與window對(duì)象相關(guān)，要么與form控件相關(guān)。
　　判斷一個(gè)瀏覽器是否在DOM2級(jí)事件上支持HTML事件，可以采用下面的代碼：
　　var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');
　　若果在dom2級(jí)事件上實(shí)現(xiàn)的話，將會(huì)返回true，否則返回false
　　var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);
　　在dom3級(jí)上同理。

The load Event

　　load事件可能是javascript中最常用到的。對(duì)window對(duì)象而言，當(dāng)網(wǎng)頁被完全加載完畢時(shí)，觸發(fā)load事件?？偠灾?，任何發(fā)生在window上的事件可以通過body元素的屬性進(jìn)行訪問，因?yàn)樵贖TML中是沒有權(quán)限訪問window元素。

　　對(duì)于img標(biāo)簽當(dāng)你制定img標(biāo)簽的src屬性時(shí)，同樣可以觸發(fā)他的load事件。

　　如下：

復(fù)制代碼代碼如下:

 
EventUtil.addHandler(window, “l(fā)oad”, function(){ 
var image = new Image(); 
EventUtil.addHandler(image, “l(fā)oad”, function(event){ 
alert(“Image loaded!”); 
}); 
image.src = “smile.gif”; 
}); 

　　同樣也有其他的元素以一種非標(biāo)準(zhǔn)的方式支持load event，如script標(biāo)簽元素，當(dāng)在 IE9+、FF、Opera、Chrome、Safari3.0+中動(dòng)態(tài)加script并且加載完成時(shí)將觸發(fā)script的load事件，與img元素不同，js文件開始加載是在src屬性被賦值之后，而且這個(gè)元素已經(jīng)被加入到document之中。因此Event handler的順序與src賦值無關(guān)。
　　例子如下：

復(fù)制代碼代碼如下:

 
EventUtil.addHandler(window, “l(fā)oad”, function(){ 
var script = document.createElement(“script”); 
script.type = “text/javascript”; 
EventUtil.addHandler(script, “l(fā)oad”, function(event){ 
alert(“Loaded”); 
}); 
script.src = “example.js”; 
document.body.appendChild(script); 
}); 

　IE和Opera同樣支持link標(biāo)簽的load事件。

The unload Event
　　與load事件相對(duì)的就是 unload事件，這個(gè)事件當(dāng)document完全被卸載的時(shí)候觸發(fā)。典型的例子就是，瀏覽器從一個(gè)一面導(dǎo)航到另一個(gè)頁面的時(shí)候會(huì)觸發(fā)該事件，并且通常是用這個(gè)事件來釋放內(nèi)存，避免沒有必要的內(nèi)存占用。與load事件相似，unload事件可以通過兩種方式進(jìn)行創(chuàng)建即通過js和通過HTML屬性來創(chuàng)建。
　　對(duì)于unload事件的處理函數(shù)要格外的小心，因?yàn)樽詮男遁d事件被激發(fā),并不是所有的對(duì)象都是可用的,當(dāng)頁面被加載仍然可用。試圖操作Dom節(jié)點(diǎn)的位置或者改變外觀會(huì)出現(xiàn)錯(cuò)誤。

The resize Event

　　當(dāng)瀏覽器窗口的長度和高度被改變時(shí)會(huì)觸發(fā) resize 事件，這個(gè)事件發(fā)生在window對(duì)象上，注冊(cè)方式與前兩個(gè)事件的注冊(cè)方式相同。

　　與其他發(fā)生在window對(duì)象上的事件相同，在dom瀏覽器中該事件的target指的是document，而IE8 和更早版本的瀏覽器中是沒有相關(guān)屬性可以使用的。

　　在不同的瀏覽器中resize事件存在這很多不同，在IE safari chrome opera中只要修改一個(gè)像素的值，該事件就會(huì)被觸發(fā)。而在FF中只有當(dāng)重置大小操作停止時(shí)才會(huì)觸發(fā)這個(gè)事件。并且瀏覽器的最大最小化同樣會(huì)觸發(fā)此事件。

The scroll Event

　　雖然scroll事件發(fā)生在window對(duì)象上，但他也同樣適用于頁面級(jí)元素。在混在模式下，對(duì)應(yīng)的變化反映在<body>元素的scrollLeft和scrollTop屬性；在標(biāo)準(zhǔn)模式下，對(duì)應(yīng)的變化發(fā)生在<HTML>元素上,除了safari，其他的瀏覽器都遵守上述的規(guī)則，例如：

復(fù)制代碼代碼如下:

 
EventUtil.addHandler(window, “scroll”, function(event){ 
if (document.compatMode == “CSS1Compat”){//標(biāo)準(zhǔn)模式反映在html上。 
alert(document.documentElement.scrollTop); 
} else { 
alert(document.body.scrollTop); 
} 
}); 