HTML Events
Sep 04, 2024 pm 04:14 PMIn a web page or a website created using the HTML script (HyperText Markup Language), every action performed by the user and the web tool itself is termed an HTML Event. The description contains six types of attributes for every Event: window event attribute, form event attribute, keyboard event attribute, mouse event attribute, media event attribute, and clipboard event attribute. Each of these event attributes will have specific dedicated attributes that are used to fetch the details of the HTML Event.
Different Type of HTML Events
There are many event attributes available in HTML5, which are classified primarily into 6 different types. These attributes work using JavaScript language.
- ?Windows Event Attributes:?This is provided for the action of the windows object. It works in body tag? .
- ?Form Event Attributes:?If the user performs some action in the form like input data, cancel, submit, then these event attributes works.
- ?Keyboard Event Attributes:?This keyboard event attributes used for keyboard action and user interaction.
- ?Mouse Event Attributes:?Mouse event attribute used for mouse action that is move, click, wheel, etc.
- ?Clipboard Event Attributes: This event attributes used for clipboard action: example, cut, copy, pest.
- ?Media Event Attributes: This event attribute works on media files like video etc.
Description of Event Attributes
Here is some explanation of event attributes which are given below in detail:
1. Windows Event Attributes
|
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. Form Event Attributes
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. Keyboard Event Attributes
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. Mouse Event Attributes
? ?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. Clipboard Event Attributes
?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. Media Event Attributes
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. |
Conclusion
Html Events are an easy way to take action and interface between web browsers and users. Users can get the reaction of every action effortless. For example, cut and copy for the clipboard, move and click for mouse, buttons for form. Events make web applications real-time and make smart work systems.
The above is the detailed content of HTML Events. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.

Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.

Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen

Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.

To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this

When using HTML5Geolocation API to obtain user location, you must first obtain user authorization, and request and explain the purpose at the right time; the basic method is navigator.geolocation.getCurrentPosition(), which contains successful callbacks, wrong callbacks and configuration parameters; common reasons for failure include permission denied, browser not supported, network problems, etc., alternative solutions and clear prompts should be provided. The specific suggestions are as follows: 1. Request permissions when the user operation is triggered, such as clicking the button; 2. Use enableHighAccuracy, timeout, maximumAge and other parameters to optimize the positioning effect; 3. Error handling should distinguish between different errors

Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.
