JavaScript 事件——“事件類型”中“UI事件”的注意要點

sushi 發布于2019-08-19 17:22 / 2659人閱讀

摘要：事件這個事件在文檔被完全卸載后觸發。事件當瀏覽器窗口被調整到一個新的高度或寬度，就會觸發該事件。事件該事件雖然在對象上發生的，但實際表示的是頁面中響應元素的變化。事件關于等事件以后再討論事件關于等事件以后再討論事件關于等事件以后再討論

“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等事件以后再討論

error事件

關于abort、error、select等事件以后再討論

select事件

關于abort、error、select等事件以后再討論

GPU云服務器云服務器 js事件類型 vps日常維護中的一些要點總結 javascript的事件云主機的要點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78468.html

JavaScript DOM 事件初探

摘要：級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。對象只存在于事件處理程序執行期間，一旦執行完畢，立即被銷毀。焦點事件焦點事件會在頁面元素獲得或失去焦點時觸發。 JavaScript DOM 事件初探原文鏈接事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間，比如單擊、雙擊、鼠標懸浮等。事件流事件流描述的是從頁面中接收事件的順序，或者說是事件在頁面中傳播...

Moxmi 2019-08-20 11:14 評論0 收藏0
JavaScript 事件——“模擬事件”的注意要點

DOM中的事件模擬三個步驟：首先通過document.createEvent()方法創建event對象，接收一個參數，即表示要創建的事件類型的字符串： UIEvents（DOM3中的UIEvent）鼠標和鍵盤事件； MouseEvents（DOM3中的MouseEvent）鼠標事件； MutationEvents（DOM3中的MutationEvent）變動事件； HTMLEvents（沒有...

BakerJ 2019-08-19 17:26 評論0 收藏0
JavaScript 事件——“事件類型”中“復合事件”和“變動事件”的注意要點

摘要：復合事件復合事件是級事件中心添加的一類事件，用于處理的輸入序列。這個事件在之后觸發在一個節點被直接從文檔中移除，或通過子樹間接從文檔中移除之前觸發。最后一個觸發的事件是，觸發于新插入節點的父節點。復合事件復合事件是DOM3級事件中心添加的一類事件，用于處理IME的輸入序列。 compositionstart、compositionupdate、compositionend 復合...

Meathill 2019-08-19 17:24 評論0 收藏0
JavaScript系列之事件類型

摘要：有兩種事件處理程序的方式。第一種第二種事件當調整瀏覽器的窗口到一個新的寬度或高度時，就會觸發事件。事件在元素獲得焦點時觸發。這個事件冒泡某些瀏覽器不支持。事件在鼠標光標從元素外部首次移動到元素范圍內時觸發。事件這個事件跟蹤鼠標滾輪。 JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門本文主要簡單介紹以下幾類事件： UI事件焦點事件鼠標與滾輪...

chanthuang 2019-08-21 17:17 評論0 收藏0
JavaScript 事件——“事件類型”中“設備事件”和“觸摸與手勢事件”的注意要點

摘要：對象不包含任何信息事件事件，該事件已被移除，應該使用事件但是事件仍然是實驗性的事件，目前有部分瀏覽器暫時不支持。每個觸摸事件的對象都提供了在鼠標事件中常見的屬性。設備事件 orientationchange事件該事件的window.orientation屬性中包含3個值：0表示肖像模式、90表示左旋轉的橫向模式、-90表示右旋轉的橫向模式。event對象不包含任何信息： wind...

Ethan815 2019-08-22 11:00 評論0 收藏0