首頁 > web前端 > js教程 > UI Events 使用者介面事件_javascript技巧

UI Events 使用者介面事件_javascript技巧

PHP中文网
發布: 2016-05-16 17:52:20
原創
1234 人瀏覽過

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,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、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物件上,但他也同樣適用於頁級元素。在混在模式下,對應的變化反映在元素的scrollLeft和scrollTop屬性;在標準模式下,對應的變化發生在元素上,除了safari,其他的瀏覽器都遵守上述的規則,例如: 

EventUtil.addHandler(window, “scroll”, function(event){ 
if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。 
alert(document.documentElement.scrollTop); 
} else { 
alert(document.body.scrollTop); 
} 
});
登入後複製

以上就是UI Events 使用者介面事件_javascript技巧的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


相關標籤:
ui
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板