DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> UI Events 用戶界面事件
UI Events 用戶界面事件
編輯:關於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);
}
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved