欧美黄色片在线播放,69xxxx女人,nxgx.hd

HTML 21 天入門(mén)：事件和腳本

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月19日 22:15 本文熱度 470

事件(Event)

網(wǎng)頁(yè)上的事件，是指當(dāng)用戶在網(wǎng)頁(yè)上做某個(gè)操作時(shí)，這個(gè)操作被瀏覽器捕獲，被捕獲的操作，即為事件。

事件有很多種，不同的 HTML 控件（標(biāo)簽）有不同的事件。

捕獲事件，是為了基于用戶的操作提供更多的交互，或者說(shuō)，事件為 HTML 提供了更多的功能擴(kuò)展，讓網(wǎng)頁(yè)能提供更為豐富的功能。

目前我們說(shuō)的事件，是已經(jīng)定義好的事件。所以在使用的時(shí)候，只要用就可以了。

大體上，能使用的事情分成以下幾類(lèi)：

窗口事件
表單事件
鍵盤(pán)事件
鼠標(biāo)事件
多媒體事件
其它事件

每一個(gè)事件分類(lèi)里，都有一批量可用的事件，在每個(gè)分類(lèi)里挑幾個(gè)常用的進(jìn)行說(shuō)明。

窗口事件(Windows Event)

窗口事情適用于 body 標(biāo)簽。窗口可理解為當(dāng)前這個(gè)網(wǎng)頁(yè)。

它的常見(jiàn)事件有比如說(shuō) onload，表示當(dāng)前這個(gè)網(wǎng)頁(yè)文檔加載的事件。

<body onload="alert('歡迎光臨！')"></body>

在 body 標(biāo)簽里添加了屬性 onload，它會(huì)在網(wǎng)頁(yè)文檔加載時(shí)調(diào)用，而調(diào)用的是腳本內(nèi)置的方法 alert，表示彈出一個(gè)提示框，上面寫(xiě)著“歡迎光臨”。

表單事件

表單事件適用于 HTML 的所有元素，但這些元素必須存在于 form 元素之內(nèi)。

比如說(shuō) oninput，是獲得用戶輸入時(shí)觸發(fā)的事件。

<form action="/" method="post">   測(cè)試oninput事件：<input     id="textbox"     oninput="alert(document.getElementById('textbox').value)"     value=""   /> </form>

可以看到，在用戶輸入還未展示在 input 里時(shí)，oninput 事件就被觸發(fā)而且可以通過(guò)腳本拿到用戶輸入出來(lái)的值，當(dāng)事件結(jié)束后，用戶輸入的值就顯示在了頁(yè)面上。

鍵盤(pán)事件

鍵盤(pán)事件比較少，只有以下三個(gè)，貫穿了鍵盤(pán)上的按鍵被按下又彈起來(lái)的全過(guò)程。

onkeydown: 當(dāng)按下按鍵時(shí)觸發(fā)（此時(shí)還未被按到最下面，只是按了）。
onkeypress: 當(dāng)按鍵被按下后松開(kāi)時(shí)觸發(fā)。
onkeyup: 當(dāng)按鍵復(fù)原到一開(kāi)始位置時(shí)觸發(fā)。

以上事件不太好使用圖形示意，大家可以自行根據(jù)前面的示例在本地嘗試。

鼠標(biāo)事件

鼠標(biāo)的事件相對(duì)鍵盤(pán)來(lái)說(shuō)，就多了很多。其中最常用的是 onclick 事件，當(dāng)然還有其它常用的，比如說(shuō) ondrag，表示在拖拽時(shí)觸發(fā)，ondbclick，雙擊時(shí)觸發(fā)，等等。

其中 ondrag 這一系列事件，是后來(lái)新增到 HTML 里的。

多媒體事件

多媒體事件，指的是多媒體元素相關(guān)的操作引發(fā)的事情。

這里幾乎所有的事件都是新事件，原因也比較簡(jiǎn)單，多媒體元素是 HTML5 引用的新元素。

而它們的事件也不難理解，比如在音頻或視頻播放時(shí)觸發(fā)的事件，onplay。

其它事件

另外兩個(gè)新增的事件，沒(méi)有歸類(lèi)到上述里，它們分別是 onshow 和 ontoggle。

這兩個(gè)事件的引入，最主要的原因還是這兩個(gè)操作在網(wǎng)頁(yè)上非常常見(jiàn)，ontoggle 表示折疊和展開(kāi)某個(gè)內(nèi)容時(shí)觸發(fā)。

在后來(lái)的腳本框架里，幾乎都實(shí)現(xiàn)了這一類(lèi)操作的常函數(shù)以簡(jiǎn)化開(kāi)發(fā)人員寫(xiě)腳本的工作。

腳本(Script)

介紹完了事件，就得說(shuō)一說(shuō)腳本了，因?yàn)橐幚硎录旧想x不開(kāi)腳本的支持。

在頁(yè)面上插入腳本，要用到標(biāo)簽 script，這個(gè)標(biāo)簽里即可以直接寫(xiě)腳本，也可以通過(guò) src 指定一個(gè)腳本文件的路徑引入腳本。

這里我們說(shuō)的腳本，默認(rèn)是指使用 Javascript 這一門(mén)語(yǔ)言寫(xiě)的代碼。

它最常用于操作圖片，表單驗(yàn)證，內(nèi)容動(dòng)態(tài)更新等等。

與 script 相對(duì)應(yīng)的一個(gè)標(biāo)簽是 noscript，當(dāng)瀏覽器不支持腳本，或禁用了腳本的時(shí)候，noscript 里的內(nèi)容會(huì)被顯示。

<script>   document.write("Hello World!"); </script> <noscript>您的瀏覽器不支持 JavaScript或禁用了Javascript!</noscript>

上述代碼執(zhí)行完的結(jié)果，就輸出 Hello World! 但如果瀏覽器不支持腳本，它就會(huì)顯示 noscript 中間的文字信息。

腳本與事件處理

一個(gè)腳本與事件處理的完整例子。

<script>   function changeBGColor() {     document.body.style.backgroundColor = "#ff0000"; //Red color   } </script>  <body>   <button type="button" onclick="changeBGColor()">點(diǎn)我改變背景色！</button> </body>