狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

HTML 21 天入門: 事件和腳本

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

事件(Event)

網頁上的事件,是指當用戶在網頁上做某個操作時,這個操作被瀏覽器捕獲,被捕獲的操作,即為事件。

事件有很多種,不同的 HTML 控件(標簽)有不同的事件。

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

目前我們說的事件,是已經定義好的事件。所以在使用的時候,只要用就可以了。

大體上,能使用的事情分成以下幾類:

  • 窗口事件

  • 表單事件

  • 鍵盤事件

  • 鼠標事件

  • 多媒體事件

  • 其它事件

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

窗口事件(Windows Event)

窗口事情適用于 body 標簽。窗口可理解為當前這個網頁。

它的常見事件有比如說 onload,表示當前這個網頁文檔加載的事件。

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

在 body 標簽里添加了屬性 onload,它會在網頁文檔加載時調用,而調用的是腳本內置的方法 alert,表示彈出一個提示框,上面寫著“歡迎光臨”。

表單事件

表單事件適用于 HTML 的所有元素,但這些元素必須存在于 form 元素之內。

比如說 oninput,是獲得用戶輸入時觸發的事件。

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

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

鍵盤事件

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

  • onkeydown: 當按下按鍵時觸發(此時還未被按到最下面,只是按了)。

  • onkeypress: 當按鍵被按下后松開時觸發。

  • onkeyup: 當按鍵復原到一開始位置時觸發。

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

鼠標事件

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

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

多媒體事件

多媒體事件,指的是多媒體元素相關的操作引發的事情。

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

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

其它事件

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

這兩個事件的引入,最主要的原因還是這兩個操作在網頁上非常常見,ontoggle 表示折疊和展開某個內容時觸發。

在后來的腳本框架里,幾乎都實現了這一類操作的常函數以簡化開發人員寫腳本的工作。

腳本(Script)

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

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

這里我們說的腳本,默認是指使用 Javascript 這一門語言寫的代碼。

它最常用于操作圖片,表單驗證,內容動態更新等等。

與 script 相對應的一個標簽是 noscript,當瀏覽器不支持腳本,或禁用了腳本的時候,noscript 里的內容會被顯示。

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

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

腳本與事件處理

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

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

默認的背景色是白色,當點擊了按鈕之后,背景色變成紅色,這里使用了事件 onclick,同時它調用了方法 changeBGColor,在腳本里,實現了 changeBGColor 方法,修改了背景色為紅色。

總結

  • ?? 事件是被捕獲的用戶操作,基于不同的事情,能提供更豐富的功能。

  • ?? 腳本常用于操作圖片,表單驗證,內容動態更新等等。

  • ?? 事件和腳本的結合,能夠提供更好的事件處理以及代碼管理。


該文章在 2024/10/22 12:31:05 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2024 ClickSun All Rights Reserved