New Event Attributes in HTML 5
An event refers to an action that is triggered on a browser, such as clicking of the button on a form. These actions can be defined using client-side scripting, such as JavaScript. An event can occur at the various actions performed by a user, for example, clicking the links or filling and submitting the form.
In HTML 5, various new event attributes are added, such as window, mouse, form, and media.
Let’s learn about each of them in details.
The Window Event Attributes
The window events define the evens that control the state of a window, such as load and unload. These events are defined with the use of window object. It checks whether the page is loading or losing focus. If the page does not load properly or loses focus, then an error occurs. Therefore, to trigger the state of a window or window object, various window event attributes are introduced in HTML 5.
Below given lists all the window event attributes of HTML 5:
|
Attribute |
Description |
|---|---|
|
onafterprint |
Runs the script after printing the document |
|
onbeforeprint |
Runs the script before the printing of the document |
|
onbeforeonload |
Runs the script before loading the document |
|
onerror |
Runs the script when error is occurred |
|
onhaschange |
Runs the script on the change of the document |
|
onmessage |
Runs the script when the message is triggered |
|
onoffline |
Runs the script when the document goes offline |
|
ononline |
Runs the script when the document comes online |
|
onpagehide |
Runs the script when window is in hidden state |
|
onpageshow |
Runs the script when the window is visible |
|
onpopstate |
Runs the script whenever the window’s history entry changes |
|
onredo |
Runs the script when the redo operation is performed on a document |
|
onresize |
Runs the script on the resize of the window |
|
onstorage |
Runs the script on the loading of a document |
|
onundo |
Runs the script when an undo operation is performed on a document |
|
onunload |
Runs the script while unloading the document |
Let’s perform the following steps to generate an event on the load of an HTML Web page.
Open a blank Notepad document.
Add the code to the document, as below given below:
<!Doctype html>
<html>
<head>
<title> window Event </title>
</head>
<body>
<p>here, we are loading the document containing an image which is not available.</p>
<img src=”image.jpg” onerror=”alert(‘There is an error on loading the image.’)” />
<p>Generating error on loading of page, for the non availability of image</p>
</body>
</html> Save the document with a name WindowEvent.html.
Open the HTML document in the Web browser.
The Form Event
The form events define the events that are associated with the form input fields. For example, if a user clicks the submit button after filling all the fields of the form, then two actions can be performed. If the data entered by the user is correct, it prompts the message on the successful submission of a form to the server, otherwise, error message is prompted to the user. Below given all list of new form events of HTML 5.
|
Attribute |
Description |
|---|---|
|
oncontextmenu |
Runs the script while triggering a context menu. |
|
onformchange |
Runs the script when a form element changes |
|
onforminput |
Runs the script while the user provides the input in the form. |
|
oninput |
Runs the script when user input is made to the element of a form. |
|
oninvalid |
Runs the script when certain attributes such as pattern, min, or max applied to the form field shows invalid value. It happens when appropriate value according to the validation rule is not supplied to the form fields. |
Note: you learn more about the form events in the further tutorial
Let’s learn about the new mouse events introduces in HTML 5
The Mouse Events
In HTML 5, new mouse events have been introduced, which are generated when the mouse pointer comes in contact with any HTML element. For example, clicking the mouse, moving the mouse, or hovering the mouse pointer over an HTML element, generates mouse events. In addition to this, you can also change an image when a user hovers a mouse over an image. In HTML 5, these events are triggered by invoking client-side script, such as JavaScript. Below given lists the new mouse evens of HTML 5.
|
Attribute |
Description |
|---|---|
|
ondrag |
Generates an event on dragging an element |
|
ondragend |
Generates an event when an element shows the end of the drag operation |
|
ondragenter |
Generates an event when an element has been dragged to the valid drop target |
|
ondragleave |
Generates an event after the element being dragged leaves a valid drop target |
|
ondragover |
Generates an event when an element is being dragged over a valid drop target |
|
ondragstart |
Generates an event when a drag operation starts |
|
ondrop |
Generates an event when a dragged element is dropped |
|
onmousewheel |
Generates an event when the element’s scrollbar is scrollbar is scrolled |
Let’s now learn about new media events introduced in HTML 5
The Media Events
HTML 5 has introduced a new concept of media events, which are associated with the media elements used in the Web page. With the use of media events, you can perform various actions such as play, pause, or stop a media file on a Web page. These events are applied to the most commonly used media elements such as audio, video, embed, and object. Below given lists of the media events of HTML 5:
|
Attribute |
Description |
|---|---|
|
oncanplay |
Generates a script which specifies when media file can start playing but might stop for buffering |
|
oncanplaythrough |
Generates a script which specifies that the media file can play continuously without any stoppage for buffering |
|
ondurationchange |
Generates a script when the length of the media is changed |
|
onemptied |
Runs a script, when there is empty media resource element |
|
onended |
Generates a script when the media has reached the end |
|
onerror |
Generates a script when an error is occurred on loading the media element |
|
onloadeddata |
Generates a script when the media data has been loaded |
|
onloadedmetadata |
Generates a script when the duration of the media and any other media data is changed |
|
onloadstart |
Generates a script when media starts loading on the browser |
|
onpause |
Generates a script when the media is paused |
|
onplay |
Generates a script when media file is about to start playing on the browser |
|
onplaying |
Generates a script when media file has start playing |
|
onprogress |
Generates a script while retrieving the media on the browser |
|
onratechange |
Generates a script when there is a change in the rate of media playing on the browser |
|
onreadystatechange |
Generates an event when there is a change in the ready-state |
|
onseeked |
Generates a script when the seeking attribute is the media element holds fals and the seeking has stopped |
|
onseeking |
Generates a script when a seek operation has begun |
|
onstalled |
Generates a script when there is an error in fetching the media data |
|
onsuspend |
Generates a script when the process of fetching the media data stops |
|
ontimeupdate |
Generates a script when there is a change in the playing position of the media |
|
onvolumechange |
Generates a script when the volume level is either increased, decreased, or is mute in the media |
|
onwaiting |
Generates a script when media has stopped its operation but is expected to resume |
Note: you learn about the media events in the further tutorial