google.com, pub-8786015629279405, DIRECT, f08c47fec0942fa0 HTML Events and Calling Java Script function on event

HTML Events and Calling Java Script function on event

0
When a user visit your website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events.
We can write our event handlers in Javascript or vbscript and can specify these event handlers as a value of event tag attribute. The HTML 4.01 specification defines 19 event attributes as listed below −

<body> and <frameset> Level Events

There are only two attributes which can be used to trigger any javascript or vbscript code when there is any event occurs on document level.
AttributeValueDescription
onloadscriptScript runs when a HTML document loads
onunloadscriptScript runs when a HTML document unloads
NOTE − Here script refer to any VBScript or JavaScript function or piece of code.

<form> Level Events

There are following six attributes which can be used to trigger any javascript or vbscript code when there is any event occurs on form level.
AttributeValueDescription
onchangescriptScript runs when the element changes
onsubmitscriptScript runs when the form is submitted
onresetscriptScript runs when the form is reset
onselectscriptScript runs when the element is selected
onblurscriptScript runs when the element loses focus
onfocusscriptScript runs when the element gets focus

Keyboard Events

There are following three events which are generated by keyboard. These events are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.
AttributeValueDescription
onkeydownscriptScript runs when key is pressed
onkeypressscriptScript runs when key is pressed and released
onkeyupscriptScript runs when key is released

Other Events

There following other 7 events which are generated by mouse when it comes in contact of any HTML tag. These events are not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.
AttributeValueDescription
onclickscriptScript runs when a mouse click
ondblclickscriptScript runs when a mouse double-click
onmousedownscriptScript runs when mouse button is pressed
onmousemovescriptScript runs when mouse pointer moves
onmouseoutscriptScript runs when mouse pointer moves out of an element
onmouseoverscriptScript runs when mouse pointer moves over an element
onmouseupscriptScript runs when mouse button is released
The HTML 4.01 specification had defined 19 events but later HTML-5 has added many other events which we have listed down here −

Window Events Attributes

Following events have been introduced in older versions of HTML but all the tags marked with HTML-5are part of HTML-5.
EventsHTML-5Description
onafterprintHTML-5Triggers after a document is printed
onbeforeprintHTML-5Triggers before a document is printed
onbeforeonloadHTML-5Triggers before a document loads
onerrorHTML-5Triggers when an error occurs
onhaschangeHTML-5Triggers when a document has changed
onloadTriggers when a document loads
onmessageHTML-5Triggers when a message is triggered
onofflineHTML-5Triggers when a document goes offline
ononlineHTML-5Triggers when a document comes online
onpagehideHTML-5Triggers when a window is hidden
onpageshowHTML-5Triggers when a window becomes visible
onpopstateHTML-5Triggers when a window's history changes
onredoHTML-5Triggers when a document performs a redo
onresizeHTML-5Triggers when a window is resized
onstorageHTML-5Triggers when a document loads
onundoHTML-5Triggers when a document performs an undo
onunloadTriggers when a user leaves the document

Form Events

Following tags have been introduced in older versions of HTML but all the tags marked with HTML-5 are part of HTML-5.
EventsHTML-5Description
onblurTriggers when a window loses focus
onchangeTriggers when an element changes
oncontextmenuHTML-5Triggers when a context menu is triggered
onfocusTriggers when a window gets focus
onformchangeHTML-5Triggers when a form changes
onforminputHTML-5Triggers when a form gets user input
oninputHTML-5Triggers when an element gets user input
oninvalidHTML-5Triggers when an element is invalid
onresetTriggers when a form is reset
onselectTriggers when an element is selected
onsubmitTriggers when a form is submitted

Keyboard Events

EventsHTML-5Description
onkeydownTriggers when a key is pressed
onkeypressTriggers when a key is pressed and released
onkeyupTriggers when a key is released

Mouse Events

Following tags have been introduced in older versions of HTML but all the tags marked with HTML-5 are part of HTML-5.
EventsHTML-5Description
onclickTriggers on a mouse click
ondblclickTriggers on a mouse double-click
ondragHTML-5Triggers when an element is dragged
ondragendHTML-5Triggers at the end of a drag operation
ondragenterHTML-5Triggers when an element has been dragged to a valid drop target
ondragleaveHTML-5Triggers when an element leaves a valid drop target
ondragoverHTML-5Triggers when an element is being dragged over a valid drop target
ondragstartHTML-5Triggers at the start of a drag operation
ondropHTML-5Triggers when a dragged element is being dropped
onmousedownTriggers when a mouse button is pressed
onmousemoveTriggers when the mouse pointer moves
onmouseoutTriggers when the mouse pointer moves out of an element
onmouseoverTriggers when the mouse pointer moves over an element
onmouseupTriggers when a mouse button is released
onmousewheelHTML-5Triggers when the mouse wheel is being rotated
onscrollHTML-5Triggers when an element's scrollbar is being scrolled

Media Events

Following tags have been introduced in older versions of HTML but all the tags marked with HTML-5 are part of HTML-5.
EventsHTML-5Description
onabortTriggers on an abort event
oncanplayHTML-5Triggers when a media can start play, but might has to stop for buffering
oncanplaythroughHTML-5Triggers when a media can be played to the end, without stopping for buffering
ondurationchangeHTML-5Triggers when the length of a media is changed
onemptiedHTML-5Triggers when a media resource element suddenly becomes empty.
onendedHTML-5Triggers when a media has reached the end
onerrorHTML-5Triggers when an error occurs
onloadeddataHTML-5Triggers when media data is loaded
onloadedmetadataHTML-5Triggers when the duration and other media data of a media element is loaded
onloadstartHTML-5Triggers when the browser starts loading the media data
onpauseHTML-5Triggers when media data is paused
onplayHTML-5Triggers when media data is going to start playing
onplayingHTML-5Triggers when media data has started playing
onprogressHTML-5Triggers when the browser is fetching the media data
onratechangeHTML-5Triggers when the playing rate of media data has changed
onreadystatechangeHTML-5Triggers when the ready-state changes
onseekedHTML-5Triggers when the seeking attribute of a media element is no longer true, and the seeking has ended
onseekingHTML-5Triggers when the seeking attribute of a media element is true, and the seeking has begun
onstalledHTML-5Triggers when there is an error in fetching media data
onsuspendHTML-5Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdateHTML-5Triggers when media changes its playing position
onvolumechangeHTML-5Triggers when a media changes the volume, also when volume is set to "mute"
onwaitingHTML-5Triggers when media has stopped playing, but is expected to resume

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Thank you for your interest 😊

We will back shortly after reviewing...

Thank you for your interest 😊

We will back shortly after reviewing...

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top