HTML 21 天入門: 事件和腳本
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
事件(Event)網頁上的事件,是指當用戶在網頁上做某個操作時,這個操作被瀏覽器捕獲,被捕獲的操作,即為事件。 事件有很多種,不同的 HTML 控件(標簽)有不同的事件。 捕獲事件,是為了基于用戶的操作提供更多的交互,或者說,事件為 HTML 提供了更多的功能擴展,讓網頁能提供更為豐富的功能。 目前我們說的事件,是已經定義好的事件。所以在使用的時候,只要用就可以了。 大體上,能使用的事情分成以下幾類:
每一個事件分類里,都有一批量可用的事件,在每個分類里挑幾個常用的進行說明。 窗口事件(Windows Event)窗口事情適用于 body 標簽。窗口可理解為當前這個網頁。 它的常見事件有比如說 onload,表示當前這個網頁文檔加載的事件。
在 body 標簽里添加了屬性 onload,它會在網頁文檔加載時調用,而調用的是腳本內置的方法 alert,表示彈出一個提示框,上面寫著“歡迎光臨”。 表單事件表單事件適用于 HTML 的所有元素,但這些元素必須存在于 form 元素之內。 比如說 oninput,是獲得用戶輸入時觸發的事件。
可以看到,在用戶輸入還未展示在 input 里時,oninput 事件就被觸發而且可以通過腳本拿到用戶輸入出來的值,當事件結束后,用戶輸入的值就顯示在了頁面上。 鍵盤事件鍵盤事件比較少,只有以下三個,貫穿了鍵盤上的按鍵被按下又彈起來的全過程。
以上事件不太好使用圖形示意,大家可以自行根據前面的示例在本地嘗試。 鼠標事件鼠標的事件相對鍵盤來說,就多了很多。其中最常用的是 onclick 事件,當然還有其它常用的,比如說 ondrag,表示在拖拽時觸發,ondbclick,雙擊時觸發,等等。 其中 ondrag 這一系列事件,是后來新增到 HTML 里的。 多媒體事件多媒體事件,指的是多媒體元素相關的操作引發的事情。 這里幾乎所有的事件都是新事件,原因也比較簡單,多媒體元素是 HTML5 引用的新元素。 而它們的事件也不難理解,比如在音頻或視頻播放時觸發的事件,onplay。 其它事件另外兩個新增的事件,沒有歸類到上述里,它們分別 是 onshow 和 ontoggle。 這兩個事件的引入,最主要的原因還是這兩個操作在網頁上非常常見,ontoggle 表示折疊和展開某個內容時觸發。 在后來的腳本框架里,幾乎都實現了這一類操作的常函數以簡化開發人員寫腳本的工作。 腳本(Script)介紹完了事件,就得說一說腳本了,因為要處理事件,基本上離不開腳本的支持。 在頁面上插入腳本,要用到標簽 script,這個標簽里即可以直接寫腳本,也可以通過 src 指定一個腳本文件的路徑引入腳本。 這里我們說的腳本,默認是指使用 Javascript 這一門語言寫的代碼。 它最常用于操作圖片,表單驗證,內容動態更新等等。 與 script 相對應的一個標簽是 noscript,當瀏覽器不支持腳本,或禁用了腳本的時候,noscript 里的內容會被顯示。
上述代碼執行完的結果,就輸出 Hello World! 但如果瀏覽器不支持腳本,它就會顯示 noscript 中間的文字信息。 腳本與事件處理一個腳本與事件處理的完整例子。
默認的背景色是白色,當點擊了按鈕之后,背景色變成紅色,這里使用了事件 onclick,同時它調用了方法 changeBGColor,在腳本里,實現了 changeBGColor 方法,修改了背景色為紅色。 總結
該文章在 2024/10/22 12:31:05 編輯過 |
關鍵字查詢
相關文章
正在查詢... |