HTML5 Events

Event is an object that describes a state change in a source or is an action or occurrence detected by the program. It can be generated by anyone interacting with the elements in a GUI. Some of the activities that cause events such as clicking button, entering character from the keyboard and many more. This tutorial lists the summary of events in the HTML5 programming language. This list also provides the brief description for each event.

Following sections list some of the attributes of events:

HTML5 Events

Window Event Attributes

• onafterprint
  • Value: Script
  • Description:The script will run when document is printed successfully.
  • Syntax:<element onafterprint=”script”>
• onbeforeprint
  • Value: Script
  • Description: The script will be executed before the document is printed.
  • Syntax:<element onbeforeprint =”script”>
• onbeforeunload
  • Value: Script
  • Description: It will trigger before the document is unloaded.
  • Syntax:<element onbeforeunload =”script”>
• onhaschange
  • Value: Script
  • Description: It will run the script when the contents inside is modified.
  • Syntax:< body onhaschange=”funref()”>
• onerror
  • Value: Script
  • Description: It will run the script when an error will occur.
  • Syntax:< element onerror=”script”>
• onload
  • Value: Script
  • Description: It will run when document is loaded.
  • Syntax:< body onload =”script”>
• onfocus
  • Value: Script
  • Description: The script will be run when window get focus.
  • Syntax:< element onfocus =”script”>
• onmessage
  • Value: Script
  • Description: Script should be run when message is triggered.
  • Syntax:< element onmessage =” handler(event)”>
• onoffline
  • Value: Script
  • Description: It will run the script when the internet in connection and site was offline.
  • Syntax:< element onoffline =” handler(event)”>
• ononline
  • Value: Script
  • Description: It will run the script when the document comes online.
  • Syntax:< element ononline =” handler(event)”>
• onpagehide
  • Value: Script
  • Description: It will run the script when the window is hidden.
  • Syntax:< element onpagehide =” handler(event)”>
• onpageshow
  • Value: Script
  • Description: It will run the script when the page is shown after it was hidden.
  • Syntax:< element onpageshow =” handler(event)”>
• onpopstate
  • Value: Script
  • Description: The script should be run before the pop menu was displayed.
  • Syntax:< element onpopstate =” handler(event)”>
• onredo
  • Value: Script
  • Description: It triggers when the document uses a redo option.
  • Syntax:< body onredo=”funref()”>
• onresize
  • Value: Script
  • Description: The script to be run when the size of the window is altered.
  • Syntax:< element onresize =”script”>
• onstorage
  • Value: Script
  • Description: The script to be run when web storage is updated.
  • Syntax:< element onstorage =” handler(event)”>
• onundo
  • Value: Script
  • Description: It triggers when the document uses a undo option.
  • Syntax:< element onundo =”funref()”>
• onunload
  • Value: Script
  • Description: It triggers when user leaves the document when browser window has been closed.
  • Syntax:< element onunload =”script”>

Form Event Attributes

• onblur
  • Value: Script
  • Description: It triggers when window loses focus.
  • Syntax:< element onblur =”script”>
• onchange
  • Value: Script
  • Description: It triggers when category of a menu is changed.
  • Syntax:< element onchange =”script”>
• oncontextmenu
  • Value: Script
  • Description: It fires when a context menu is triggered on an element.
  • Syntax:< element contextmenu =” menu_id “>
• onformchange
  • Value: Script
  • Description: It triggers when an element value in the form changes .
  • Syntax:< element onformchange =”script”>
• onforminput
  • Value: Script
  • Description: It fires when value is entered in the form .
  • Syntax:< element onforminput =”script”>
• oninput
  • Value: Script
  • Description: Script to be run when value is entered in the input field.
  • Syntax:< element oninput =” handler(event)”>
• oninvalid
  • Value: Script
  • Description: The script to be run when element becomes invalid.
  • Syntax:< element oninvalid =” handler(event)”>
• onselect
  • Value: Script
  • Description: Script will be executed each time when particular field is selected.
  • Syntax:< element onselect =”script”>
• onsubmit
  • Value: Script
  • Description: It triggers when a form is submitted.
  • Syntax:< form onsubmit =”script”>

Keyboard Event Attributes

• onkeydown
  • Value: Script
  • Description: It triggers when each time user presses a key down on keyboard.
  • Syntax:< element onkeydown =”script”>
• onkeyup
  • Value: Script
  • Description: Script will be executed when a key is pressed or released.
  • Syntax:< element onkeyup =”script”>
• onkeypress
  • Value: Script
  • Description: It fires when a key has been pressed.
  • Syntax:< element onkeypress =”script”>

Mouse Event Attributes

• onclick
  • Value: Script
  • Description: It triggers when user clicks the mouse button once.
  • Syntax:< element onclick =”script”>
• ondbclick
  • Value: Script
  • Description: It fires on user clicks the mouse button twice.
  • Syntax:< element ondbclick =”script”>
• ondrag
  • Value: Script
  • Description: Script to be run when element is dragged.
  • Syntax:< element ondrag =” handler(event)”>
• ondragend
  • Value: Script
  • Description: It fires at the end of the dragging process.
  • Syntax:< element ondragend =” handler(event)”>
• ondragenter
  • Value: Script
  • Description: It triggers when element has been dragged to valid drop target.
  • Syntax:< element ondragenter =” handler(event)”>
• ondragleave
  • Value: Script
  • Description: It triggers when element has been leaves a valid drop target.
  • Syntax:< element ondragleave =” handler(event)”>
• ondragover
  • Value: Script
  • Description: It > triggers when element is being dragged over a valid drop target.
  • Syntax:< element ondragover =” handler(event)”>
• ondragstart
  • Value: Script
  • Description: It > Script to be run when drag operation starts.
  • Syntax:< element ondragstart =” handler(event)”>
• ondrop
  • Value: Script
  • Description: It > It fires when user releases the draggable element i.e. drops the element.
  • Syntax:< element ondrop =” handler(event)”>
• onmousedown
  • Value: Script
  • Description: It fires when mouse button is pressed down on the element.
  • Syntax:< element onmousedown =”script” >
• onmousemove
  • Value: Script
  • Description: Script will be executed when mouse pointer moves over a menu.
  • Syntax:< element onmousemove =”script” >
• onmouseout
  • Value: Script
  • Description:Script will be executed when mouse pointer moves out of the menu.
  • Syntax:< element onmouseout =”script” >
• onmouseover
  • Value: Script
  • Description: > It fires when mouse pointer moves over an element.
  • Syntax:< element onmouseover =”script” >
• onmouseup
  • Value: Script
  • Description: It fires when mouse button is pressed or released the script will be executed.
  • Syntax:< element onmouseup =”script” >
• onmousewheel
  • Value: Script
  • Description: It triggers when user moves the mouse wheel.
  • Syntax:< element onmousewheel =”script” >
• onscroll
  • Value: Script
  • Description: It fires when user moves the scrollbar on an element.
  • Syntax:< element onscroll =”handler “>

Media Event Attributes

• onabort
  • Value: Script
  • Description: Script to be run when media file is stopped.
  • Syntax:< onabort =” script “>
• oncanplay
  • Value: Script
  • Description: Script to be run when file is ready to start playing when it has enough buffer to begin.
  • Syntax:< audio|video oncanplay =” script “>
• oncanplaythrough
  • Value: Script
  • Description: It triggers when file can be played to the end without pausing for buffering.
  • Syntax:< audio|video oncanplaythrough =” script “>
• ondurationchange
  • Value: Script
  • Description: Script will be executed when user changes duration of media file.
  • Syntax:< element ondurationchange =” handler(event)”;>
• onemptied
  • Value: Script
  • Description: Script to be run when file is suddenly unavailable.
  • Syntax:< element onemptied =” handler(event)”;>
• onended
  • Value: Script
  • Description: This fires when duration of the media comes to an end.
  • Syntax:< element onended =” handler(event)” >
• onerror
  • Value: Script
  • Description: Script to be run when error occurs as file is being loaded.
  • Syntax:< element onerror =” handler(event)” >
• onloadeddata
  • Value: Script
  • Description: This triggers when media data is loaded.
  • Syntax:< element onloadeddata =” handler(event)” >
• onloadedmetadata
  • Value: Script
  • Description: Script will be executed when meta data like file size, dimensions and duration of the media are loaded.
  • Syntax:< element onloadedmetadata =” handler(event)” >
• onloadstart
  • Value: Script
  • Description: Triggers when the browser starts to load before anything is actually loaded.
  • Syntax:< element onloadstart =” handler(event)” >
• onpause
  • Value: Script
  • Description: It fires when media is paused by the user.
  • Syntax:< element onpause =” handler(event)” >
• onplaying
  • Value: Script
  • Description: Script will be executed when media has started playing.
  • Syntax:< element onplaying =” handler(event)” >
• onplay
  • Value: Script
  • Description: Triggers when media is ready to start playing.
  • Syntax:< element onplay =” handler(event)” >
• onprogress
  • Value: Script
  • Description: It fires when browser is ready for getting the data.
  • Syntax:< audio|video onprogress =” script ” >
• onratechange
  • Value: Script
  • Description: When media forwarded or backward the script will be executed.
  • Syntax:< element onratechange =” handler(event)” >
• onreadystatechange
  • Value: Script
  • Description: It fires whenever ready state was modified.
  • Syntax:< element onreadyratechange =” handler(event)” >
• onseeked
  • Value: Script
  • Description: Script to be run when seeking attribute is set to false indicating that seeking has ended.
  • Syntax: object.onseeked=handler;
• onseeking
  • Value: Script
  • Description: Script to be run when seeking attribute is set to true indicating that seeking is active.
  • Syntax:< element onseeking =” handler(event)” >
• onstalled
  • Value: Script
  • Description: Script to be run when media file is not applicable in the browser.
  • Syntax:< element onstalled =” handler(event)” >
• onsuspend
  • Value: Script
  • Description: It triggers when there is interruption in internet connection.
  • Syntax:< element onsuspend =” handler(event)” >
• ontimeupdate
  • Value: Script
  • Description: Script will be executed when playing position changes to different point in the media.
  • Syntax:object.ontimeupdate=handler;
• onvolumechange
  • Value: Script
  • Description: script will be executed when volume of the media file is raised or muted.
  • Syntax:< element onvolumechange =” handler(event)” >
• onwaiting
  • Value: Script
  • Description: Script to be run when the selected media files were ready to play as per order.
  • Syntax:< element onwaiting =” handler(event)” >

 

Previous Tutorial : HTML5 Doctype  :: Next Tutorial : HTML5 Figure Tag