1. EVENTS + TIMERS

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