Vivian Crap

• onMouseDown: A mouse button has been pressed.
• onMouseMove: The mouse has been moved.
• onMouseOut: The mouse pointer has left an element.
• onMouseOver: The mouse pointer has entered an element.
• onMouseUp: A mouse button has been released.
• onClick: One mousedown and one mouseup detected on this element.
• onDbClick: A mouse button has been double-clicked (clicked twice rapidly).

clientX/clientY

          			function onMouseDownHandler(event) {
          				var e = event || window.event; // IE stores events in window object.
          				var mouseObj = {left: e.clientX, top: e.clientY}; // Store the position of the mouse object.
          			}
          			element.onmousedown = onMouseUpHandler;
          		

currentTarget and relatedTarget/fromElement and toElement

          			var GENERIC = {
          				findCurrentTarget: function(event, node) {
          					var currentTarget;
          					if (window.event) // For IE
          						currentTarget = node;
          					else if (event && event.currentTarget) // For Firefox, Opera
          						currentTarget = event.currentTarget;
          					return currentTarget;
          				},
          				findRelatedTarget: function(event) {
          					var relatedTarget;
          					if (window.event) { // For IE
          						if (window.event.fromElement)
          							relatedTarget = window.event.fromElement;
          						else if (window.event.toElement)
          							relatedTarget = window.event.toElement;
          					} else if (event && event.relatedTarget) { // For Firefox, Opera
          						relatedTarget = event.relatedTarget;
          					}
          					return relatedTarget;
          				}
          			};
          		

Convert Mouse Coordinates

          			var CSS = {
          				// Return the position of the element relative to the top-left corner of the document.
          				offset: function(element) {
          					if (!element) return;
							if (typeof element == "string") element = document.getElementById(element);
          					var left = 0, top = 0;
          					for (var elem = element; elem; elem = elem.offsetParent) {
          						left += elem.offsetLeft;
          						top += elem.offsetTop;
          					}
          					for (elem = element.parentNode; elem && elem != document.body; elem = elem.parentNode) {
          						if (elem.scrollLeft) left -= elem.scrollLeft;
          						if (elem.scrollTop) top -= elem.scrollTop;
          					}
          					return {left: left, top: top};
          				}
          			};
          		

drag() takes two arguments. The first is the element that is to be dragged. This may be the element on which the mousedown event occurred or a containing element (e.g., you might allow the user to drag on the titlebar of a window to move the entire window).
In either cases, it muse refer to a document element that is absolutely positioned using the CSS position attribute. The second argument is the event object associated with the triggering mousedown event.

drag() records the position of the mousedown event and then registers event handlers for the mousemove and mouseup events that follow the mousedown event. The handler for the mousemove event is responsible for moving the document element, and the handler for the mouseup event is responsible for deregistering itself and the mousemove handler.
It is important to note that the mousemove and mouseup handlers are registered as capturing event handlers because the user may move the mouse faster than the document element can follow it, and some of these events occur outside the original target element. Without capturing, the events may not be dispatched to the correct handlers.
Also, note that the moveHandler() and upHandler() functions that are registered to handle these events are defined as functions nested within drag(). Because they are defined in this nested scope they can use the arugments and local variables of drag(), which considerably simplifies their implementation.

• onKeyDown: A keyboard key is pressed.
• onKeyPress: A keyboard key is pressed or held down.
• onKeyUp: A keyboard key is released.

charCode and keyCode

charCode is the integer property specifies for keydown and keyup events and Unicode character code for keypress events. Use String.fromCharCode() to convert character codes to strings.

• The DOM Event Model
• Mouse Events
• Event Properties
• Drag and Drop
• Mozilla Drag and Drop Documentation
• How to Drag and Drop in Javascript
• How to Drag and Drop in Javascript (Chinese)