搜尋

HTML 事件

Sep 04, 2024 pm 04:14 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

在使用 HTML 腳本(超文本標記語言)建立的網頁或網站中,使用者和 Web 工具本身執行的每個操作稱為 HTML 事件。每個事件的描述包含六種類型的屬性:視窗事件屬性、表單事件屬性、鍵盤事件屬性、滑鼠事件屬性、媒體事件屬性和剪貼簿事件屬性。每個事件屬性都將具有特定的專用屬性,用於取得 HTML 事件的詳細資訊。

不同類型的 HTML 事件

HTML5 中有許多可用的事件屬性,主要分為 6 種不同類型。這些屬性使用 JavaScript 語言來工作。

HTML 事件

  •  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.
屬性

描述

onafterprint 不過,該腳本在文件列印後起作用。 onbeforeprint 不過,該腳本在列印文件之前起作用。 卸載前 在卸載文件之前,此腳本有效。 錯誤  文件中發生錯誤,然後執行此事件。 onhashchange  事件執行時文件中 URL 的錨點部分發生變化。 載入 當第一個網頁載入完成時,執行此事件。 onmessage 在文件中,執行當時發生的事件的訊息。 線上離線 如果網路連線不可用且瀏覽器顯示離線,則執行該事件。 線上 當瀏覽器中網路可用時,則執行該事件。 頁隱藏 這個腳本行為;如果使用者不在目前網頁上工作,則可以隱藏目前頁面。 onpageshow 此腳本在目前網頁載入時起作用。 onpopstate 此腳本會自動在瀏覽器上執行以變更歷史狀態。 調整大小 此腳本在視窗的瀏覽器改變大小時起作用。 儲存 當用戶網路儲存更新時,則執行該事件。 卸載 使用者目前網頁未載入或視窗關閉,則執行該事件。 表>

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 then event fired.
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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
為什麼HTML標籤對Web開發很重要?為什麼HTML標籤對Web開發很重要?May 02, 2025 am 12:03 AM

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

說明將一致的編碼樣式用於HTML標籤和屬性的重要性。說明將一致的編碼樣式用於HTML標籤和屬性的重要性。May 01, 2025 am 12:01 AM

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

如何在 Bootstrap 4 中實現多項目輪播?如何在 Bootstrap 4 中實現多項目輪播?Apr 30, 2025 pm 03:24 PM

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

deepseek官網是如何實現鼠標滾動事件穿透效果的?deepseek官網是如何實現鼠標滾動事件穿透效果的?Apr 30, 2025 pm 03:21 PM

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

HTML 視頻的播放控件樣式怎麼修改HTML 視頻的播放控件樣式怎麼修改Apr 30, 2025 pm 03:18 PM

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

在手機上使用原生select會帶來哪些問題?在手機上使用原生select會帶來哪些問題?Apr 30, 2025 pm 03:15 PM

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

在手機上使用原生select的弊端是什麼?在手機上使用原生select的弊端是什麼?Apr 30, 2025 pm 03:12 PM

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

如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?Apr 30, 2025 pm 03:09 PM

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

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

MantisBT

MantisBT

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

DVWA

DVWA

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

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

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

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具