I am trying to bind an event on the 'mousedown' event type so as to trigger the 'mousemove' event and keep it running till the 'mouseup' event happens (i.e. the 'mousemove' event must continue as long as the mouse button is kept pressed). The 'mousedown' event must take place within a div box, but the 'mousemove' and 'mouseup' events may happen outside the box. Could you please help me to settle the problem?
P.S. I am not interested in help of frameworks. I do learn JavaScript! =)
The problem at the moment is you're never releasing the document.onmousemove handler, and you're never attaching the document.onmouseup handler (you RemoveEventHandler it in handleEvent instead of adding). You need a separate mousemove handler and mouseup handler; the mouseup function should remove the document mouse events that were added in the mousedown handler, then call back to do whatever function the drag is intended to achieve.
Plus, if you don't want the browser's own dragging actions to interfere with your UI, you'll need to prevent the default action for the mousedown event. This is done with return false in old-school event-handler functions, window.event.returnValue in IE and event.preventDefault() in DOM Events, so it's something you'd want EventUtil to wrap.
I'm not sure the EventUtil is worth much in this case. You're only using one event handler for each target, so sticking to the simple onevent= handler style should be fine. If you do sometimes need multiple listeners, it's probably best to make it throw an error when neither addEventListener nor attachEvent are available, otherwise the fallback to on... will make the script behave inconsistently.