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>