首頁 > web前端 > js教程 > JavaScript事件類型中UI事件詳解_javascript技巧

JavaScript事件類型中UI事件詳解_javascript技巧

WBOY
發布: 2016-05-16 15:20:08
原創
1464 人瀏覽過

「DOM3級事件」規定了一下幾類事件

UI事件,當使用者與頁面上的元素互動時除法;
焦點事件,元素獲得或失去焦點;
滑鼠事件,透過滑鼠在頁面上執行操作;
滾輪事件,使用滑鼠滾輪或類似設備;
文字事件,當使用者在文件中輸入文字;
鍵盤事件,透過鍵盤在頁面上執行操作;
合成事件,當為IME(Input Method Editor,輸入法編輯器)輸入字元時除法;
變動事件(mutation),底層DOM結構改變;
變動名稱事件,當元素或屬性名稱變更時,此類事件已被廢棄。
下文著重說明UI事件的內容

UI事件指的是那些不一定與使用者操作有關的事件。

DOMActivate,元素已经被用户操作(鼠标或键盘)激活。已经被废弃。
load,页面完全加载完后在window上触发,所有框架加载完毕后在框架集上触发,图像加载完毕在img元素上触发,当嵌入内容加载完毕在object元素上触发。
unload,页面完全卸载(window),所有框架都卸载后(框架集),嵌入内容卸载完毕后(object)。
abort,当用户停止下载过程,如果嵌入内容没有加载完,则在object元素上除法。
error,当js错误时(window),当无法加载图像时(img),当无法加载嵌入内容时(object),当一或多个框架无法加载(框架集)。
select,当用户选择文本框(texterea或input)中的一个或多个字符时触发。
resize:当窗口或框架的大小变化时(window或框架)
scroll:当用户滚动带滚动条的元素中的内容时(在该元素上触发)
登入後複製

load事件

js中最常用的事件就是load,當頁面完全載入完畢後(所有圖片、js檔案、css檔案等),就會觸發window上面的load事件。如:

window.onload = function () {
  console.log('loaded');
}
登入後複製

一般來說,在window上面發生的任何事件都可以在body元素中透過對應的特徵來指定,因為在HTML中無法存取window元素。這只是為了確保向後相容的一種權宜之計。如:

document.body.onload = function () {
  console.log('loaded');
}
登入後複製

同樣也可以在影像元素上使用:

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}
登入後複製

又如下面程式碼,在window載入完畢後,想body追加一個img元素,在img元素載入完畢後再提示圖片的src以及一個提示訊息:

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}
登入後複製

另外,script元素也以非標準的方式支援load事件。

部分瀏覽器也支援link元素上的load事件,以便開發人員確定樣式表是否已載入完畢。

unload事件

這個事件在文件被完全卸載後觸發。只要使用者從一個頁面切換到另一個頁面,就會發生unload事件。

window.onunload = function () {
  alert("8888");
}
登入後複製

應該小心編寫onunload事件處理程序中的程式碼,因為頁面載入後存在的那些對象,此時就不一定存在了。

resize事件

當瀏覽器視窗被調整到一個新的高度或寬度,就會觸發該事件。

window.onresize = function () {
  console.log(document.body.clientWidth);
}
登入後複製

因為部分瀏覽器在視窗變化了1像素就觸發該事件,並隨著變化不斷觸發;也有瀏覽器則只會在用戶停止調整視窗大小時才會觸發。所以應該避免在這個事件的處理程序中加入大量的計算程式碼,避免瀏覽器反應變慢。

scroll事件

該事件雖然在window物件上發生的,但實際表示的是頁面中回應元素的變化。在混雜模式下,透過body元素的scrollLeft和scrollTop來監控變化;而在非標準模式下,除Safari之外的所有瀏覽器都會透過html元素(documentElement)來反映這個變化:

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}
登入後複製

因為瀏覽器隨著變化而不斷觸發,所以應該避免在這個事件的處理程序中加入大量的計算程式碼,避免瀏覽器反應變慢。

abort事件

關於abort、error、select等事件請注意後續update

error事件

關於abort、error、select等事件請注意後續update

select事件

關於abort、error、select等事件請注意後續update

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