首頁 > 開發者 > JavaScript
UI Events並不是直接與使用者行為相關，UI Event 包括如下：
DomActivate：當元素被使用者的某些行為啟用時，觸發該事件，例如使用者的滑鼠或者鍵盤事件。這一事件在DOM3級事件中被廢棄了，FF2+和chrome支援，猶豫跨瀏覽器實現機制的不同，不推薦使用這個事件。
load：在window對象上觸發是當頁面載入完畢之後觸發的，在frameset 是當所有的frames都載入完畢之後觸發，當指img標籤時，是指圖片載入完畢之後等等。
unload：在window對象上觸發是當頁面卸載完畢之後觸發的，在frameset 是當所有的frames都卸載完畢之後觸發，當指img標籤時，是指圖片卸載完畢之後等等。
abort：當一個元素沒有完全載入完，在使用者停止了下載操作之前，而觸發。
error：當window的javascript發生錯誤時觸發，當img不能載入是觸發，或者object元素不能被載入時觸發，當frameset中的一個或多個frame不能被載入時觸發，
select：當使用者選擇textbox中一個或多個字元時觸發該事件。
resize：當window或者frame被改變大小的時候觸發。
scroll：當使用者滾動一個帶捲軸的元素時觸發。
絕大多數的HTML事件，要麼與window對象相關，要麼與form控制項相關。
判斷一個瀏覽器是否在DOM2級事件上支援HTML事件，可以採用下面的代碼：
var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');
若果在dom2級事件上實現的話，將會返回true，否則返回false
var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);
在dom3級上同理。
The load Event
load事件可能是javascript中最常用到的。對window對象而言，當網頁被完全載入完畢時，觸發load事件。總而言之，任何發生在window上的事件可以通過body元素的屬性進行訪問，因為在HTML中是沒有許可權訪問window元素。
對於img標籤當你制定img標籤的src屬性時，同樣可以觸發他的load事件。
如下：
複製代碼 代碼如下:
EventUtil.addHandler(window, “load”, function(){
var image = new Image();
EventUtil.addHandler(image, “load”, function(event){
alert(“Image loaded!”);
});
image.src = “smile.gif”;
});
同樣也有其他的元素以一種非標準的方式支援load event，如script標籤元素，當在 IE9+、FF、Opera、Chrome、Safari3.0+中動態加script並且載入完成時將觸發script的load事件，與img元素不同，js檔案開始載入是在src屬性被賦值之後，而且這個元素已經被加入到document之中。因此Event handler的順序與src賦值無關。
例子如下：
複製代碼 代碼如下:
EventUtil.addHandler(window, “load”, function(){
var script = document.createElement(“script”);
script.type = “text/javascript”;
EventUtil.addHandler(script, “load”, function(event){
alert(“Loaded”);
});
script.src = “example.js”;
document.body.appendChild(script);
});
IE和Opera同樣支援link標籤的load事件。
The unload Event
與load事件相對的就是 unload事件，這個事件當document完全被卸載的時候觸發。典型的例子就是，瀏覽器從一個一面導航到另一個頁面的時候會觸發該事件，並且通常是用這個事件來釋放記憶體，避免沒有必要的記憶體佔用。與load事件相似，unload事件可以通過兩種方式進行建立即通過js和通過HTML 屬性來建立。
對於unload事件的處理函數要格外的小心，因為自從卸載事件被激發,並不是所有的對象都是可用的,當頁面被載入仍然可用。試圖操作Dom節點的位置或者改變外觀會出現錯誤。
The resize Event
當瀏覽器視窗的長度和高度被改變時會觸發 resize 事件，這個事件發生在window對象上，註冊方式與前兩個事件的註冊方式相同。
與其他發生在window對象上的事件相同，在dom瀏覽器中該事件的target指的是document，而IE8 和 更早版本的瀏覽器中是沒有相關屬性可以使用的。
在不同的瀏覽器中resize事件存在這很多不同，在IE safari chrome opera中只要修改一個像素的值，該事件就會被觸發。而在FF中只有當重設大小操作停止時才會觸發這個事件。並且瀏覽器的最大 最小化同樣會觸發此事件。
The scroll Event
雖然scroll事件發生在window對象上，但他也同樣適用於頁面級元素。在混在模式下，對應的變化反映在<body>元素的scrollLeft和scrollTop屬性；在標準模式下，對應的變化發生在<HTML>元素上,除了safari，其他的瀏覽器都遵守上述的規則，例如：
複製代碼 代碼如下:
EventUtil.addHandler(window, “scroll”, function(event){
if (document.compatMode == “CSS1Compat”){//標準模式反映在html上。
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
