@coder 788
HTML Event Attributes
2021-11-17 19:49 · 15 min read
Event
Every action performed by the user and the web tool itself is termed as an Event of HTML. When an event trigger we can run javascript functions and many more. like starting JavaScript when a user clicks on an element.
An HTML event maybe something the browser does, or something a User does. Here are a few examples of HTML events: An HTML web page has completed loading. An HTML input field was changed.
Event is the action performed by the User.
Different Types of HTML Events.
- Windows Event Attributes: This is provided for the action of the windows object. It works in body tag <body>.
- 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: These keyboard event attributes are is is is used for keyboard action and user interaction.
- Mouse Event Attributes: Mouse event attribute used for mouse action that is move, click, wheel, etc.
- Media Event Attributes: This event attribute works on media files like video etc.
Example:
<button style="width: 160px;background-color: rgb(255,82,82);border: none;padding: 11px 20px;color:#fff" onclick="alert('Hey you clicked me')">Click me</button>
Windows Event Attributes
| Attribute | Details |
|---|---|
| onafterprint | This script act, though after the document is is is printed. |
| onbeforeprint | This script act, though before a document printed. |
| onbeforeunload | Whereas before the unloaded document, this Script works. |
| onerror | In 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 is executed. |
| onmessage | In the document, the message that occurred at that time event was executed. |
| onoffline | If the network connection is unavailable and the browser says offline then the event is executed. |
| ononline | When the network is available in the browser then the event is executed. |
| onpagehide | This script act, if the user not working on a current webpage then-current page can be hidden. |
| onpageshow | This script act at that time the current webpage is loaded by its users. |
| onpopstate | This script automatically works on the browser for a history state change. |
| onresize | This script act when the browser of the window changes its size. |
| onstorage | When the user's web storage is updated then the event is executed. |
| onunload | Either the user’s current webpage is not loaded, or the window is closed, then the event is executed. |
Form Event Attributes
| Attribute | Details |
|---|---|
| onblur | The onblur event occurs when an object loses focus |
| onchange | The value change in the form then the is the vent fired. |
| onfocus | In the form <input>, <a> , <select> object has focus. Working on this object then event fired. |
| oninput | The user gives input of value in the form then this event is fired. |
| oninvalid | The event works 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 the form then the event is fired. |
| onsubmit | The user submits the form at the end then the event is fired. |
Keyboard Event Attributes
| Attribute | Details |
|---|---|
| onkeydown | Using a keyboard, the user presses 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. |
Mouse Event Attributes
| Attribute | Details |
|---|---|
| onclick | The user clicks the mouse on the button then an event occurred. |
| ondblclick | Users double-click the mouse then the event occurred. |
| oncontextmenu | Users right-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. |
Media Event Attributes
| Attribute | Details |
|---|---|
| onabort | When media files are aborted for download and play again then an event occurs. |
| oncanplay | When any media file is ready for play then this trigger is fired. |
| oncanplaythrough | Media file ready to play without buffering and loading. |
| oncuechange | Element changes the cue of <track> then event fired. |
| ondurationchange | The Media file changes the length of time then the trigger is fired. |
| onemptied | If the Media file is unavailable and comes fatal error then the trigger is fired. |
| onended | Media file comes on endpoint then trigger is fired. |
| onerror | When an error occurred to get the media file then 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 is 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 video's playback speed is changed then the trigger is fired. |
| onseeked | Users completed moving otherwise skip the new position of video. this attribute is set as false. |
| onseeking | The user wants to move otherwise skip the new position of the video. this attribute is set as true. |
| onstalled | When the browser suddenly stops 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 from low to high. |
| onwaiting | If the data load the information, the current video stop with buffering then the event works. |
TAGS:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
