一本无码不卡在线视频,AV 不卡三区精

HTML 21 天入門：事件和腳本

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

admin

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

事件(Event)

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

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

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

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

大體上，能使用的事情分成以下幾類：

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

每一個事件分類里，都有一批量可用的事件，在每個分類里挑幾個常用的進行說明。

窗口事件(Windows Event)

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

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

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

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

表單事件

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

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

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

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

鍵盤事件

鍵盤事件比較少，只有以下三個，貫穿了鍵盤上的按鍵被按下又彈起來的全過程。

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

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

鼠標(biāo)事件

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

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

多媒體事件

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

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

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

其它事件

另外兩個新增的事件，沒有歸類到上述里，它們分別是 onshow 和 ontoggle。

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

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

腳本(Script)

介紹完了事件，就得說一說腳本了，因為要處理事件，基本上離不開腳本的支持。

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

這里我們說的腳本，默認(rèn)是指使用 Javascript 這一門語言寫的代碼。

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

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

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

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

腳本與事件處理

一個腳本與事件處理的完整例子。

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