<< Back to the blog

Events (Mouse, Keyboard & Touch)




By @islamzatary

Events (Mouse, Keyboard & Touch)

User input devices grouped into:

1. Keyboard.
2. Mouse.
3. Touch.


Events (Mouse, Keyboard & Touch)

1. Keyboard:
1. onkeydown
2. onkeypress
3. onkeyup

Example


Events (Mouse, Keyboard & Touch)

2. Mouse:
1. onclick
2. ondblclick
3. onmousedown
4. onmouseenter
5. onmouseleave
6. onmouseover
7. onmouseout
8. onmouseup
Example


Events (Mouse, Keyboard & Touch)

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


Events (Mouse, Keyboard & Touch)

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();


Events (Mouse, Keyboard & Touch)

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


Events (Mouse, Keyboard & Touch)

Resources:
1. Touch Events
2. Understand Touch
3. Touch & Mouse
4. Understand Viewport


Events (Mouse, Keyboard & Touch)






Wrapping up








<< Back to the blog

by @islamzatary