成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 事件——“事件類型”中“UI事件”的注意要點(diǎn)

sushi / 2675人閱讀

摘要：事件這個(gè)事件在文檔被完全卸載后觸發(fā)。事件當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾?，就?huì)觸發(fā)該事件。事件該事件雖然在對(duì)象上發(fā)生的，但實(shí)際表示的是頁(yè)面中響應(yīng)元素的變化。事件關(guān)于等事件以后再討論事件關(guān)于等事件以后再討論事件關(guān)于等事件以后再討論

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

UI事件，當(dāng)用戶與頁(yè)面上的元素交互時(shí)除法；

焦點(diǎn)事件，元素獲得或失去焦點(diǎn)；

鼠標(biāo)事件，通過(guò)鼠標(biāo)在頁(yè)面上執(zhí)行操作；

滾輪事件，使用鼠標(biāo)滾輪或類似設(shè)備；

文本事件，當(dāng)用戶在文檔中輸入文本；

鍵盤事件，通過(guò)鍵盤在頁(yè)面上執(zhí)行操作；

合成事件，當(dāng)為IME（Input Method Editor，輸入法編輯器）輸入字符時(shí)除法；

變動(dòng)事件（mutation），底層DOM結(jié)構(gòu)發(fā)生變化；

變動(dòng)名稱事件，當(dāng)元素或?qū)傩悦儎?dòng)時(shí)，此類事件已被廢棄。

下文著重說(shuō)明UI事件的內(nèi)容

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

DOMActivate，元素已經(jīng)被用戶操作（鼠標(biāo)或鍵盤）激活。已經(jīng)被廢棄。

load，頁(yè)面完全加載完后在window上觸發(fā)，所有框架加載完畢后在框架集上觸發(fā)，圖像加載完畢在img元素上觸發(fā)，當(dāng)嵌入內(nèi)容加載完畢在object元素上觸發(fā)。

unload，頁(yè)面完全卸載（window），所有框架都卸載后（框架集），嵌入內(nèi)容卸載完畢后（object）。

abort，當(dāng)用戶停止下載過(guò)程，如果嵌入內(nèi)容沒(méi)有加載完，則在object元素上除法。

error，當(dāng)js錯(cuò)誤時(shí)（window），當(dāng)無(wú)法加載圖像時(shí)（img），當(dāng)無(wú)法加載嵌入內(nèi)容時(shí)（object），當(dāng)一或多個(gè)框架無(wú)法加載（框架集）。

select，當(dāng)用戶選擇文本框（texterea或input）中的一個(gè)或多個(gè)字符時(shí)觸發(fā)。

resize：當(dāng)窗口或框架的大小變化時(shí)（window或框架）

scroll：當(dāng)用戶滾動(dòng)帶滾動(dòng)條的元素中的內(nèi)容時(shí)（在該元素上觸發(fā)）

load事件

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

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

一般來(lái)說(shuō)，在window上面發(fā)生的任何事件都可以在body元素中通過(guò)相應(yīng)的特征來(lái)指定，因?yàn)樵贖TML中無(wú)法訪問(wèn)window元素。這只是為了保證向后兼容的一種權(quán)宜之計(jì)。如：

document.body.onload = function () {
    console.log("loaded");
}

同樣也可以在圖像元素上使用：

var img = document.getElementById("img");
img.onload = function () {
    console.log(event.target.src);
}

又如下面代碼，在window加載完畢后，想body追加一個(gè)img元素，在img元素加載完畢后再提示圖像的src以及一個(gè)提示信息：

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元素也以非標(biāo)準(zhǔn)的方式支持load事件。

部分瀏覽器還支持link元素上的load事件，以便開(kāi)發(fā)人員確定樣式表是否加載完畢。

unload事件

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

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

應(yīng)該小心編寫(xiě)onunload事件處理程序中的代碼，因?yàn)轫?yè)面加載后存在的那些對(duì)象，此時(shí)就不一定存在了。

resize事件

當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾龋蜁?huì)觸發(fā)該事件。

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

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

scroll事件

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

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

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

abort事件

關(guān)于abort、error、select等事件以后再討論

error事件

關(guān)于abort、error、select等事件以后再討論

select事件

關(guān)于abort、error、select等事件以后再討論

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78468.html

相關(guān)文章

  • JavaScript DOM 事件初探

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

    Moxmi 評(píng)論0 收藏0

  • JavaScript 事件——“模擬事件”的注意要點(diǎn)

    DOM中的事件模擬 三個(gè)步驟： 首先通過(guò)document.createEvent()方法創(chuàng)建event對(duì)象，接收一個(gè)參數(shù)，即表示要?jiǎng)?chuàng)建的事件類型的字符串： UIEvents（DOM3中的UIEvent）鼠標(biāo)和鍵盤事件； MouseEvents（DOM3中的MouseEvent）鼠標(biāo)事件； MutationEvents（DOM3中的MutationEvent）變動(dòng)事件； HTMLEvents（沒(méi)有...

    BakerJ 評(píng)論0 收藏0

  • JavaScript 事件——“事件類型”中“復(fù)合事件”和“變動(dòng)事件”的注意要點(diǎn)

    摘要：復(fù)合事件復(fù)合事件是級(jí)事件中心添加的一類事件，用于處理的輸入序列。這個(gè)事件在之后觸發(fā)在一個(gè)節(jié)點(diǎn)被直接從文檔中移除，或通過(guò)子樹(shù)間接從文檔中移除之前觸發(fā)。最后一個(gè)觸發(fā)的事件是，觸發(fā)于新插入節(jié)點(diǎn)的父節(jié)點(diǎn)。 復(fù)合事件 復(fù)合事件是DOM3級(jí)事件中心添加的一類事件，用于處理IME的輸入序列。 compositionstart、compositionupdate、compositionend 復(fù)合...

    Meathill 評(píng)論0 收藏0

  • JavaScript系列之事件類型

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

    chanthuang 評(píng)論0 收藏0

  • JavaScript 事件——“事件類型”中“設(shè)備事件”和“觸摸與手勢(shì)事件”的注意要點(diǎn)

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

    Ethan815 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<