Wednesday, 12 January 2011

Improved Event Management with HTML5

We are strengthened with powerful event management in  HTML5. I especially loved the mouse events. Scroll the wheel of mouse and attach a todo with onmousewheel. This works great when there is no vertical scrollbar in page. If you've both- functionality on wheel scroll as well as scrollbar, behavior may not be as per your expectation. To know whether mouse was scrolled backward or forward use wheelDelta attribute. onscroll is fired when element's scrollbar is scrolled, say as in case of textarea or document. You've got a bunch of events related with dragging of an element- ondrag, ondragstart, ondragend, ondragenter, ondragover, ondragleave, ondrop, uh....huge list! HTML5 promoting provision of drag-drop facilities, isn't it?

Till now I'd only body's onload at rescue. HTML5 is pampering me with choice- onbeforeonload, onerror. I can even trap the changes made to local or session storage. localStorage.setItem(), removeItem(), clear() will fire onstorage event- but of course these should mean 'changing' the earlier values! Other document events include printing- onafterprint and onbeforeprint, visibility- onpagehide and onpageshow, onhaschange, onredo, onundo, onoffline, ononline, onresize, onpopstate (when history changes).

You can attach additional events to form now- oncontextmenu, onformchange, onforminput, oninvalid and oninput. HTML5 also wants us to give better experience with media- audio, video and images. There are number of events for play, pause, ready, duration change, volume change, progress, wait, stalled, suspend, error and many more.

Getting ready to give better user experience?

1 comment:

  1. When I'd used mouse wheel scrolling event initially it was not working with FF. Landed up in discovering only that firefox does not support 'mousewheel' instead has its 'DOMMouseScroll' for the same functionality :(