Events (Mouse, Keyboard & Touch)
By @islamzatary
By @islamzatary
User input devices grouped into:
1. Keyboard.
2. Mouse.
3. Touch.
1. Keyboard:
1. onkeydown
2. onkeypress
3. onkeyup
Example
2. Mouse:
1. onclick
2. ondblclick
3. onmousedown
4. onmouseenter
5. onmouseleave
6. onmouseover
7. onmouseout
8. onmouseup
Example
3. Touch:
Mobile devices have a capacitive touch-sensitive screen to capture interactions made with the user's fingers.
1. touchstart(a finger is placed on a DOM element)
2. touchmove(a finger is dragged along a DOM element)
3. touchend(a finger is removed from a DOM element)
Simple Example
Canvas Demo
Best practices:
1. Prevent zooming (< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >).
2. Prevent scrolling (Some mobile devices have default behaviors for touchmove), by e.preventDefault();
jQuery Mobile Touch Events
1. jQuery Mobile Tap(taps on an element).
2. jQuery Mobile Taphold(taps on an element and hold for one second).
3. jQuery Mobile Swipe(swipes over an element horizontally by more than 30px).
4. jQuery Mobile Swipeleft(its like Swipe but its just in left direction).
5. jQuery Mobile Swiperight(its like Swipe but its just in right direction).
Example
Resources:
1. Touch Events
2. Understand Touch
3. Touch & Mouse
4. Understand Viewport
by @islamzatary