ev
- 2. AGENDA • Mouse Events • Keyboard Events • Form Events • .bind(), .unbind(), and .on() functions • Timers 2
- 3. MOUSE EVENTS • mousedown –Mouse button is pressed over the element • mouseup –Mouse button is released over the element • click –User has pressed and released the mouse button 3
- 4. MOUSE EVENTS • mousemove –user has moved the mouse over the element • All mouse events give you position on the mouse – event.pageX – event.pageY 4
- 5. MOUSE EVENTS $(“body”).mousemove(function(event) { var x = event.pageX; var y = event.pageY; console.log(“Mouse at”, x, y); }); 5
- 6. PREVENTING DEFAULT EVENT BEHAVIOR $(“body”).click(function(event) { event.preventDefault(); }); 6
- 7. EXPERIMENT - MOUSE EVENTS 7
- 8. KEYBOARD EVENTS • keydown –Key has been pressed • keyup –Key has been released • keypressed –Key has been “pressed” (up and down) • event.which –let’s us know what key is being pressed –http://asquare.net/javascript/tests/KeyCode.html 8
- 9. KEYBOARD EVENTS $(“#test-input”).keyup(function(event) { if(event.which == 13) { alert(“Pressed Enter!”); } }); 9
- 10. EXPERIMENT - KEYBOARD EVENTS 10
- 11. FORM EVENTS • submit –Form has been submitted (user clicked “submit” / pressed return) – Remember event.preventDefault()! • change –The user changed something in the element • select –User has selected a new choice in an element 11
- 12. FORM EVENTS • focus –User has placed his cursor on an element or the element is selected • blur –The element has lost focus (eg. user has clicked somewhere else). 12
- 13. PREVENTING DEFAULT EVENT BEHAVIOR $(“form”).sumbit(function(event) { event.preventDefault(); // form will now not POST / redirect // so you can use the data! }); 13
- 14. BINDING EVENTS • We’ve been using shortcuts –You can see them all at http://api.jquery.com/ category/events • .bind and .on allow you to bind any event your want. 14
- 15. .BIND - SAME THING! $(“body”).mousemove(function(event) { var x = event.pageX; var y = event.pageY; console.log(“Mouse at”, x, y); }); $(“body”).bind(“mousemove”, function(event) { var x = event.pageX; var y = event.pageY; console.log(“Mouse at”, x, y); }); 15
- 16. .ON LET’S YOU DO MULTIPLE AT ONCE $(“body”).on(“mousedown mouseup”, function(event) { var x = event.pageX; var y = event.pageY; console.log(“Mouse at”, x, y); }); 16
- 17. TIMERS • Timers let us execute code after a period of time, or over and over again at a set interval. • setTimeout(function, delay); –Execute a function after a delay • setInterval(function, delay); –Execute a function continously after a delay 17
- 18. TIMERS • When a timer is set, a timer id is returned. We can use this to stop the timer. • clearTimeout(id); • clearInterval(id); 18
- 19. TIMERS - TIMEOUT EXAMPLE function timetest() { console.log(“1 second has passed!”); } var timerId = setTimeout(timetest, 1000); 19
- 20. TIMERS - INTERVAL EXAMPLE function timetest() { console.log(“1 second has passed!”); } var timerId = setInterval(timetest, 1000); // Will print forever! We can stop it with: clearInterval(timerId); 20
- 21. NOW LET’S MAKE A COLOR PICKER 21
- 22. 22