An event attribute gets triggered when some action happens on a webpage. We have already used many attributes with HTML and some of them are onclick, onload, onkeypress, onkeydown and so on. HTML5 has introduced a number of new event attributes that are suitable for new HTML5 elements and input types and also mobile app development. We are going to see these new event attributes one by one in this section.
Drag and Drop Event Attributes
HTML5 has a number of methods to make elements draggable and droppable. To handle these elements, HTML5 adds a couple of drag and drop event attributes.
ondrag: This defines the script to run when the element is dragged.
ondrop: This defines the script to run when the element is dropped.
ondragstart: This defines the script to run when the element starts dragging.
ondragend: This defines the script to run when the element stops dragging.
ondragenter: This defines the script to run when the element enters a valid drop point.
ondragover: This defines the script to run when the drag is over.
ondragleave: Thi defines script to run when the element leaves a valid drop point.
Window Event Attributes
HTML5 has a number of events that get triggered for the window object or the <body> tag.
onbeforeunload: This defines the script to run just before the page is unloaded.
onunload: This defines the script to run once the page is unloaded.
onresize: This defines the script to run when the browser window is resized.
ononline: This defines the script to run when the Internet connectivity is on.
onoffline: This defines the script to run when the Internet connectivity is off.
onbeforeprint: This defines the script to run before the document is printed.
onafterprint: This defines the script to run after the document is printed.
onpageshow: This defines the script to run when a user navigates to a page.
onpagehide: This defines the script to run when a user navigates away from a page.
Form Event Attributes
Form event attributes get triggered by actions in an HTML form.
oninput: This defines the script to run when a user enters input in any element.
oninvalid: This defines the script to run when an element is invalid.
onreset: This defines the script to run when the Reset button is clicked.
oncontextmenu: This defines the script to run when the context menu is clicked.
Mouse Event Attributes
Form event attributes get triggered by actions in an HTML form.
onscroll: This defines the script to run when a scrollbar is being scrolled.
onwheel: This defines the script to run when the mouse wheel rolls up or down.
Media Event Attributes
Form event attributes get triggered by actions in an HTML form.
oncanplay: This defines the script to run when a file is ready to start playing.
onplay: This defines the script to run when the file is ready to start playing.
onpause: This defines the script to run when a file is paused.
onplaying: This defines the script to run when the file has started playing.
oncanplaythrough: This defines the script to run when a file can be played completely without buffering.
ondurationchange: This defines the script to run when the length of the file changes.
onvolumechange: This defines the script to run each time when the volume is changed.
onemptied: This defines the script to run when something bad like unexpected disconnection happens.
onloadstart: This defines the script to run just when the file begins to load.
onprogress: This defines the script to run when the browser is in the process of getting the media data.
onsuspend: This defines the script to run when fetching the media file is stopped before it is completely loaded.
Summary
In this section, we have seen a number of new event attributes that are suitable for new HTML5 elements and input types and also mobile app development. We will be using these attributes with different HTML5 APIs and elements in the following sections.