HTML Event Handlers

 

Wednesday, August 13, 2014

HTML Attributes for Event Handlers HTML-5.com is a great guide for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

HTML Event Handlers

HTML Attributes for Event Handlers

Drag and drop the item names below:

$ Buy Now $ Save for Later
  • Cell Phone
  • Flash Drive

This is an actual working demo of the drag and drop example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

HTML External Resource Events
onload
onunload
onabort
code to be executed when the document loading is cancelled, possibly when the user stops the page load or navigates to another page before loading has completed
HTML Window Events for on the <body> tag
onbeforeunload
onhashchange
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onredo
onresize
onstorage
onundo
onunload
HTML Keyboard Events
onkeypress
onkeydown
onkeyup
HTML Mouse Events
onmouseover
An onmouseover event is fired on an element when the cursor is moved over the element. The onmouseover and onmouseout events are often used to create rollover effects.
onmousemove
An onmousemove event is fired on an element after the onmouseover event while the cursor is being moved around within the element.
onmouseout
An onmouseout event is fired on an element when the cursor is moved off of an element. The onmouseover and onmouseout events are often used to create rollover effects.
onclick
An onclick event is fired on an element when the mouse has been single-clicked on that element.
ondblclick
An ondblclick event is fired on an element when the mouse has been double-clicked on that element.
onmousedown
An onmousedown event is fired on the element where the cursor is positioned when the mouse button has been pressed.
onmouseup
An onmouseup event is fired on the element where the cursor is positioned when the mouse button has been released.
onmousewheel
An onmousewheel event is fired on the element where the cursor is positioned when the user spins mouse wheel.
ondrag
ondragover
ondragenter
ondragleave
ondrop
ondragend
HTML Form Events
onfocus
An onblur event is fired on an element when the element loses focus, such as when the user clicks the mouse or presses the Tab key to leave an input field.
onblur
An onblur event is fired on an element when the element loses focus, such as when the user clicks the mouse or presses the Tab key to leave an input field. The onblur event is often used for validating input data.
onchange
An onchange event is fired on an element when the value of an element is different from its original value and it loses focus, such as when the user clicks the mouse or presses the Tab key to leave an input field. The onchange event is often used for validating input data.
oncontextmenu
An oncontextmenu event is fired on an element just before the context menu for that element is to be displayed.
onformchange
onforminput
oninput
oninvalid
onselect
onsubmit
onreset
HTML Printer Events
onbeforeprint
onafterprint
HTML Media Events

Although there are a number of attributes for handling media events defined as common attributes in the HTML 5 specification, they are only useful on the <audio> tag and the <video> tag. The documentation for the media event attributes are documented with those media elements.

back to top

Examples of HTML Event Handlers

Example of mouse events in HTML 5
<input type="submit"
   onmouseover="window.status='Submit form after filling in required fields'"
   onmouseout="window.status=''">
Example of drag and drop in HTML 5
(see drag and drop demo above)

On the draggable element(s), code the draggable and ondragstart attributes. On the drop location element(s), code the ondragenter, ondragover and ondrop attributes.

<table class="border">
   <tr>
      <th>$ Buy Now $</th>
      <th>Save for Later</th>
   </tr>
   <tr style="vertical-align: top">
      <td>
         <ul style="list-style: none; width: 8em; height: 4em; margin: 0; padding: 0"
            ondragenter="return true"
            ondragover="return false"
            ondrop="event.target.appendChild(document.getElementById(event.dataTransfer.getData('dragid')));
               event.stopPropagation();
               return false">
            <li id="ex1cellphone" draggable="true"
               style="margin: 0.8em; background-color: #999999; padding: 0 4px"
               ondragstart="event.dataTransfer.effectAllowed='move';
                  event.dataTransfer.setData('dragid', event.target.getAttribute('id'));
                  return true">Cell Phone</li>
            <li id="ex1flashdrive" draggable="true"
               style="margin: 0.8em; background-color: #999999; padding: 0 4px"
               ondragstart="event.dataTransfer.effectAllowed='move';
                  event.dataTransfer.setData('dragid', event.target.getAttribute('id'));
                  return true">Flash Drive</li>
         </ul>
      </td>
      <td style="padding: 0">
         <ul style="list-style: none; width: 8em; height: 4em; margin: 0; padding: 0 6px 20px 0"
            ondragenter="return true" ondragover="return false"
            ondrop="event.target.appendChild(document.getElementById(event.dataTransfer.getData('dragid')));
               event.stopPropagation();
               return false">
         </ul>
      </td>
   </tr>
</table>

back to top

Valid HTML 5