在使用 HTML 腳本(超文本標記語言)建立的網頁或網站中,使用者和 Web 工具本身執行的每個操作稱為 HTML 事件。每個事件的描述包含六種類型的屬性:視窗事件屬性、表單事件屬性、鍵盤事件屬性、滑鼠事件屬性、媒體事件屬性和剪貼簿事件屬性。每個事件屬性都將具有特定的專用屬性,用於取得 HTML 事件的詳細資訊。
不同類型的 HTML 事件
HTML5 中有許多可用的事件屬性,主要分為 6 種不同類型。這些屬性使用 JavaScript 語言來工作。
- Windows 事件屬性: 這是為 windows 物件的操作提供的。它適用於 body 標籤。
- 表單事件屬性: 如果使用者在表單中執行某些操作(例如輸入資料、取消、提交),則這些事件屬性將起作用。
- 鍵盤事件屬性: 此鍵盤事件屬性用於鍵盤操作和使用者互動。
- 滑鼠事件屬性: 用於移動、點擊、滾輪等滑鼠操作的滑鼠事件屬性。
- 剪貼簿事件屬性: 此事件屬性用於剪貼簿操作:例如、剪下、複製、害蟲。
- 媒體事件屬性: 此事件屬性適用於影片等媒體檔案。
事件屬性說明
這裡是一些事件屬性的解釋,以下詳細給出:
1. Windows 事件屬性
Attribute |
Description |
onafterprint | This script act, though, after the document printed. |
onbeforeprint | This script act, though, before a document printed. |
onbeforeunload | Whereas before the unloaded document, this Script works. |
onerror | In the document occurs the Error then this event executed. |
onhashchange | The anchor part of URL change in the document that time event executed. |
onload | When the first Web page is loaded completely, then this event executed. |
onmessage | In the document, the message that occurred at that time event executed. |
onoffline | If the network connection is unavailable and the browser says offline, then the event executed. |
ononline | When the network available in the browser, then the event executed. |
onpagehide | This script act; if the user not working on a current webpage, a then-current page can be hidden. |
onpageshow | This script act at that time the current webpage is load. |
onpopstate | This script automatically works on the browser for a history state change. |
onresize | This script act when the browser of the window changes the size. |
onstorage | When users web storage updated, then the event executed. |
onunload | The user’s current web page is not loaded or the window is closed, then the event is executed. |
描述
2.表單事件屬性
Attribute | Description |
onblur | Some form validation object loos the focus, then event fired. |
onchange | The value change in the form, then event fired. |
onfocus | In the form , , |
oninput | The user gives input of value in the form then this event fired. |
oninvalid | The event works on when the element does not satisfy its predefined constraints. |
onreset | User reset the form information, then event fired. |
onsearch | Users search the required field, then event fired. |
onselect | The user selects the text or text area in form, then event fired. |
onsubmit | The user submits the form at the end then the event fired. |
3.鍵盤事件屬性
Attribute | Description |
onkeydown | Using a keyboard, the user press the key down at that point event works |
onkeypress | Using the keyboard, users press the key and display characters at that point event works. |
onkeyup | After the press, the key user releases the key then the event works. |
4.滑鼠事件屬性
Attribute | Description |
onclick | The user clicks the mouse on the button then an event occurred. |
ondblclick | Users double click the mouse then the event occurred. |
onmousedown | The user presses the mouse button on the element then the event occurred. |
onmousemove | The user moves the mouse pointer over the element then the event occurred. |
onmouseout | The user moves the mouse outside of the element then the event occurred. |
onmouseover | The user moves the mouse over the element then the event occurred. |
onmouseup | The user released the mouse button then the event occurred. |
onmousewheel | Using the mouse wheel user rolls the up and down on element then the event occurred. |
onwheel | Using a mouse wheel user roll them up and down then the event occurred. |
5.剪貼簿事件屬性
Attribute | Description |
oncopy | Using mouse users to copy the content, then the event occurred. |
oncut | Using a mouse, users cut the content then the event occurred. |
onpaste | Using a mouse user, paste the content, then an event occurred. |
6.媒體事件屬性
Attribute | Description |
onabort | When media files aborted for download and play again, then an event occurs. |
oncanplay | When any media file ready for play, then this trigger is fired. |
oncanplaythrough | Media file ready to play without buffering and loading. |
oncuechange | Element changes the cue of |
ondurationchange | The Media file changes the length of time then the trigger is fired. |
onemptied | If the Media file unavailable and come fatal error, then the trigger is fired. |
onended | The Media file comes on endpoint then the trigger is fired. |
onerror | When an error occurred to get the media file, the trigger is fired |
onloadeddata | The Media file loads the data then the trigger is fired. |
onloadedmetadata | The Media file loads the metadata then the trigger is fired. |
onloadstart | The Media file starts to load then the trigger is fired. |
onpause | The Media file paused to play again then the trigger is fired. |
onplay | Media file ready to play, then trigger is fired. |
onplaying | The Media file starts to play when the trigger is fired. |
onprogress | This script act when the browser is working on connecting with the media data. |
onratechange | If the videos playback speed is changed, then the trigger is fired. |
onseeked | Users completed moving; otherwise, skip the new position of video. this attribute set as false. |
onseeking | The user wants to move; otherwise, skip the new position of the video. this attribute set as true. |
onstalled | When the browser suddenly stops to the connection of data, then the event works. |
onsuspend | When the web Browser on purpose does not get media data, then events work. |
ontimeupdate | When a user changes the video play position like forward and backward. |
onvolumechange | To change media volume low to high. |
onwaiting | If the data load the information, current video stop with buffering then event works. |
結論
Html 事件是在 Web 瀏覽器和使用者之間採取操作和互動的簡單方法。使用者可以毫不費力地獲得每個動作的反應。例如,剪貼簿的剪下和複製、滑鼠的移動和點擊、表單的按鈕。事件使網路應用程式變得即時並打造智慧工作系統。
以上是HTML 事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1)semantictagsimproveaccessibilityandseo.2)semanteLayOut,語義和互動性。 3)poseriblesibilityandseoandseo.3)poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

一致的HTML編碼風格很重要,因為它提高了代碼的可讀性、可維護性和效率。 1)使用小寫標籤和屬性,2)保持一致的縮進,3)選擇並堅持使用單引號或雙引號,4)避免在項目中混合使用不同風格,5)利用自動化工具如Prettier或ESLint來確保風格的一致性。

在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

記事本++7.3.1
好用且免費的程式碼編輯器

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6
視覺化網頁開發工具