Tuesday, 24 April 2012

DOM Events: Mouse Events, Keyboard Events, Form Events, Frame Events and Touch Events

Mouse Events

1. Click Event (onclick): The event occurs when the user clicks on an element.
2. Double Click Event ( ondblclick): The event occurs when the user double-clicks on an element.
3. Mouse Down (onmousedown): The event occurs when a user presses a mouse button over an element.
4. Mouse Move (onmousemove): The event occurs when a user moves the mouse pointer over an element
5. Mouse Over (onmouseover): The event occurs when a user mouse over an element.
6. Mouse Out (onmouseout): The event occurs when a user moves the mouse pointer out of an element.
7. Mouse Up (onmouseup): The event occurs when a user releases a mouse button over an element.

(Microsoft-specific events for IE)

8. Context Menu (oncontextmenu): Fires when the context menu is shown.
9. Drag (ondrag): Fires when during a mouse drag (on the moving Element).
10. Drag Start (ondragstart): Fires when a mouse drag begins (on the moving Element).
11. Drag Enter (ondragenter): Fires when something is dragged onto an area (on the target Element).
12. Dragover (ondragover): Fires when a drag is held over an area (on the target Element).
13. Drag Leave (ondragleave): Fires when something is dragged out of an area (on the target Element).
14. Drag End (ondragend): Fires when a mouse drag ends (on the moving Element).
15. Drop (ondrop): Fires when a mouse button is released over a valid target during a drag (on the target Element).
16. Select Start(onselectstart): Fires when the user starts to select text.

Keyboard Events

1. Key Down (onkeydown): The event occurs when the user is pressing a key or holding down a key.
2. Key Press (onkeypress): The event occurs when the user is pressing a key or holding down a key.
3. Key Up (onkeyup): The event occurs when a keyboard key is released.

(Microsoft-specific events for IE)

4. Help (onhelp): Fires when the user initiates help.

HTML Frame / Object Events

1. Abort (onabort): The event occurs when an image is stopped from loading before completely loaded.
2. Error (onerror): The event occurs when an image does not load properly (for <object>, <body> and <frameset>). 
3. Load (onload): The event occurs when a document, frameset, or <object> has been loaded.
4. Unload (onunload): The event occurs when a document is removed from a window or frame (for <body> and <frameset>).
5. Resize (onresize): The event occurs when a document view is resized.
6. Scroll (onscroll): The event occurs when a document view is scrolled.

(Microsoft-specific events for IE)

7. Before Unload (onbeforeunload): Fires before a document is unloaded.
8. Stop (onstop): Fires when the user stops loading the object. (unlike abort, stop event can be attached to document) 

Form Events

1. Blur (onblur): The event occurs when a form element loses focus.
2. Change (onchange): The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>).
3. Focus (onfocus): The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>).
4. Reset (onreset): The event occurs when a form is reset.
5. Select (onselect): The event occurs when a user selects some  text (for <input> and <textarea>) .
6. Submit (onsubmit): The event occurs when a form is submitted.

(Microsoft-specific events for IE)

7. Before Edit Focus (onbeforeeditfocus): Fires before an element gains focus for editing.

Miscellaneous Microsoft-specific events for IE

1. Before Print (onbeforeprint): Fires before a document is printed.
2. After Print (onafterprint): Fires immediately after the document prints.
3. Property Change (onpropertychange): Fires when the property of an object is changed.
4. Filter Change (onfilterchange): Fires when a filter changes properties or finishes a transition.
5. Readystate Change (onreadystatechange): Fires when the readyState property of an element changes.
6. Lose Capture (onlosecapture): Fires when the releaseCapture method is invoked.

Touch Events

Web browsers running on modern, touch-enabled devices have events, such as "touchstart", "touchend", "touchenter", "touchleave", "touchmove", and "touchcancel". Apple's iOS and Google's Android are two examples of mobile operating systems with support for these events in their web browsers.

When you put a finger down on the screen of the touch enabled devices, it kicks off the lifecycle of touch events and the following events get triggered.

touchstart: When a finger is placed on the touch surface/screen.
touchend: When a finger is removed from the touch surface/screen.
touchmove: When a finger already placed on the screen is moved across the screen.
touchenter: When a touch point moves onto the interactive area defined by a DOM element.
touchleave: When a touch point moves off the interactive area defined by a DOM element.
touchcancel: A user agent must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window. A user agent may also dispatch this event type when the user places more touch points (The coordinate point at which a pointer (e.g. finger or stylus) intersects the target surface of an interface) on the touch surface than the device or implementation is configured to store, in which case the earliest TouchPoint object in the TouchList should be removed.

No comments:

Post a Comment