“DOM3級事件”規(guī)定了一下幾類事件

UI事件，當用戶與頁面上的元素交互時除法；
焦點事件，元素獲得或失去焦點；
鼠標事件，通過鼠標在頁面上執(zhí)行操作；
滾輪事件，使用鼠標滾輪或類似設(shè)備；
文本事件，當用戶在文檔中輸入文本；
鍵盤事件，通過鍵盤在頁面上執(zhí)行操作；
合成事件，當為IME（Input Method Editor，輸入法編輯器）輸入字符時除法；
變動事件（mutation），底層DOM結(jié)構(gòu)發(fā)生變化；
變動名稱事件，當元素或?qū)傩悦儎訒r，此類事件已被廢棄。
下文著重說明UI事件的內(nèi)容

UI事件指的是那些不一定與用戶操作有關(guān)的事件。

DOMActivate，元素已經(jīng)被用戶操作（鼠標或鍵盤）激活。已經(jīng)被廢棄。
load，頁面完全加載完后在window上觸發(fā)，所有框架加載完畢后在框架集上觸發(fā)，圖像加載完畢在img元素上觸發(fā)，當嵌入內(nèi)容加載完畢在object元素上觸發(fā)。
unload，頁面完全卸載（window），所有框架都卸載后（框架集），嵌入內(nèi)容卸載完畢后（object）。
abort，當用戶停止下載過程，如果嵌入內(nèi)容沒有加載完，則在object元素上除法。
error，當js錯誤時（window），當無法加載圖像時（img），當無法加載嵌入內(nèi)容時（object），當一或多個框架無法加載（框架集）。
select，當用戶選擇文本框（texterea或input）中的一個或多個字符時觸發(fā)。
resize：當窗口或框架的大小變化時（window或框架）
scroll：當用戶滾動帶滾動條的元素中的內(nèi)容時（在該元素上觸發(fā)）

load事件

js中最常用的一個事件就是load，當頁面完全加載完畢后（所有圖像、js文件、css文件等），就會觸發(fā)window上面的load事件。如：

window.onload = function () {
  console.log('loaded');
}

一般來說，在window上面發(fā)生的任何事件都可以在body元素中通過相應(yīng)的特征來指定，因為在HTML中無法訪問window元素。這只是為了保證向后兼容的一種權(quán)宜之計。如：

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事件，以便開發(fā)人員確定樣式表是否加載完畢。

unload事件

這個事件在文檔被完全卸載后觸發(fā)。只要用戶從一個頁面切換到另一個頁面，就會發(fā)生unload事件。

window.onunload = function () {
  alert("8888");
}

應(yīng)該小心編寫onunload事件處理程序中的代碼，因為頁面加載后存在的那些對象，此時就不一定存在了。

resize事件

當瀏覽器窗口被調(diào)整到一個新的高度或?qū)挾?，就會觸發(fā)該事件。

window.onresize = function () {
  console.log(document.body.clientWidth);
}

因為部分瀏覽器在窗口變化了1像素就觸發(fā)該事件，并隨著變化不斷觸發(fā)；也有瀏覽器則只會在用戶停止調(diào)整窗口大小時才會觸發(fā)。所以應(yīng)該避免在這個事件的處理程序中加入大量的計算代碼，避免瀏覽器反應(yīng)變慢。

scroll事件

該事件雖然在window對象上發(fā)生的，但實際表示的是頁面中響應(yīng)元素的變化?；祀s模式下，通過body元素的scrollLeft和scrollTop來監(jiān)控變化；而在非標準模式下，除Safari之外的所有瀏覽器都會通過html元素（documentElement）來反映這個變化：

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

因為瀏覽器隨著變化不斷觸發(fā),所以應(yīng)該避免在這個事件的處理程序中加入大量的計算代碼，避免瀏覽器反應(yīng)變慢。

abort事件

關(guān)于abort、error、select等事件請關(guān)注后續(xù)update

error事件

關(guān)于abort、error、select等事件請關(guān)注后續(xù)update

select事件

關(guān)于abort、error、select等事件請關(guān)注后續(xù)update

最新評論