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=''">

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>