HTML Event Attributes
To make your web pages interactive and more interesting HTML has event handler attributes that fire off Javascript functionality when the event occurs. This aspect of HTML is a very important aspect that many people bypass investigating fully until they wish to add user interactivity to their web page elements.
On this page you will be able to reference the global event handler attributes that are common to almost all HTML elements. Each HTML element can support a number of distinct event handler attributes. Since HTML Event handler attributes are tied to Javascript, when ready you can learn Javascript logic and syntax. And be sure to check out the videos listed on the bottom of this page if you are new to HTML Event and Javascript mechanics.
HTML Global Event Handler Attributes↓
onblur - when the element loses focus.
Value: "functionName()"
onchange - when changes to the value of the element occurs.
Value: "functionName()"
onclick - when the user clicks the element.
Value: "functionName()"
ondblclick - when the user double clicks the element.
Value: "functionName()"
onfocus - when the element gets focus.
Value: "functionName()"
oninput - when the user changes the value of a form input element.
Value: "functionName()"
onkeydown - when the user presses a keyboard key down.
Value: "functionName()"
onkeypress - when the user presses a key associated with a character value.
Value: "functionName()"
onkeyup - when the user releases a downpressed keyboard key.
Value: "functionName()"
onload - when the element is finished loading.
Value: "functionName()"
onmousedown - when the user presses down on the element with left mouse button.
Value: "functionName()"
onmousemove - when the mouse moves while over the element.
Value: "functionName()"
onmouseout - when the mouse leaves the element.
Value: "functionName()"
onmouseover - when the mouse is over the element.
Value: "functionName()"
onmouseup - when the user releases from a click operation over the element.
Value: "functionName()"
onmousewheel - when the user scrolls their mouse wheel in the element.
Value: "functionName()"
onreset - when the form element is reset.
Value: "functionName()"
onscroll - when the element view is scrolled.
Value: "functionName()"
onselect - when the user selects some text in the element.
Value: "functionName()"
onsubmit - when the form element is submitted.
Value: "functionName()"
New HTML5 Event Handler Attributes↓
onabort - when element loading is aborted.
Value: "functionName()"
oncanplay - when user agent can process playback of media.
Value: "functionName()"
oncanplaythrough - when user agent sees media is fully buffered in.
Value: "functionName()"
oncontextmenu - when context menu is requested(right click of element)
Value: "functionName()"
ondrag - when user continues the drag operation.
Value: "functionName()"
ondragend - when drag operation is finished.
Value: "functionName()"
ondragenter - when user mouse enters the element while dragging.
Value: "functionName()"
ondragleave - when user mouse leaves the element while dragging.
Value: "functionName()"
ondragover - when user is hovering over the element while dragging.
Value: "functionName()"
ondragstart - when user initially begins dragging the element.
Value: "functionName()"
ondrop - when user drops dragged item into the element.
Value: "functionName()"
ondurationchange - when duration attribute is updated for the element.
Value: "functionName()"
onemptied - when media returns to an uninitialized state.
Value: "functionName()"
onended - when the end of media is reached.
Value: "functionName()"
onerror - when the element has an error loading.
Value: "functionName()"
oninvalid - when form element fails to validate to specified constraints.
Value: "functionName()"
onloadeddata - when browser can render media at current playback position.
Value: "functionName()"
onloadedmetadata - when broswer determines media dimensions and duration.
Value: "functionName()"
onloadstart - when broswer starts looking for media data in a media element.
Value: "functionName()"
onpause - when user pauses media playback.
Value: "functionName()"
onplay - when user agent initiates media playback.
Value: "functionName()"
onplaying - when playback of media element has started.
Value: "functionName()"
onprogress - when user agent is retrieving media data for the media element.
Value: "functionName()"
onratechange - when playback rate attributes update for the media element.
Value: "functionName()"
onreadystatechange - when the element and its subrecources are finished loading.
Value: "functionName()"
onseeked - when a seek operation has ended on the media element.
Value: "functionName()"
onseeking - when the seeking event for the media element fires off.
Value: "functionName()"
onshow - when user requests the element be shown as a context menu.
Value: "functionName()"
onstalled - when the media data transomission of a media element is choking.
Value: "functionName()"
onsuspend - when access of media data is suspended during buffering of media element.
Value: "functionName()"
ontimeupdate - when playback position of the media element changes.
Value: "functionName()"
onvolumechange - when the volume is changed or muted for the media element.
Value: "functionName()"
onwaiting - when the media element playback stops while waiting for more data.
Value: "functionName()"
Applying Javascript Functionality to Your HTML Event Handlers
The videos below with their included scripts demonstrate basic examples of applications being created using some of the HTML event handler attributes above. This will really show you the usefulness of knowing all of the event attributes available to us in HTML.
HTML5 Slider Tutorial Javascript Function Programming
HTML5 Numeric Stepper Tutorial Form Input Interface With Javascript Processing
HTML5 Date Time Form Input Types Tutorial With Javascript Processing
HTML5 Color Picker Input Tutorial With Javascript Ajax Form Processing Tips
0 Response to "HTML Event Attributes"
Post a Comment