EVENTS + TIMERS
AGENDA• Mouse Events• Keyboard Events• Form Events• .bind(), .unbind(), and .on() functions• Timers2
MOUSE EVENTS• mousedown    –Mouse button is pressed over the element• mouseup    –Mouse button is released over the elemen...
MOUSE EVENTS• mousemove    –user has moved the mouse over the element• All mouse events give you position on the  mouse   ...
MOUSE EVENTS$(“body”).mousemove(function(event) {  var x = event.pageX;  var y = event.pageY;  console.log(“Mouse at”, x, ...
PREVENTING DEFAULT EVENT BEHAVIOR$(“body”).click(function(event) {  event.preventDefault();});6
EXPERIMENT - MOUSE EVENTS7
KEYBOARD EVENTS• keydown    –Key has been pressed• keyup    –Key has been released• keypressed    –Key has been “pressed” ...
KEYBOARD EVENTS$(“#test-input”).keyup(function(event) { if(event.which == 13) {   alert(“Pressed Enter!”); }});9
EXPERIMENT - KEYBOARD EVENTS10
FORM EVENTS• submit     –Form has been submitted (user clicked “submit” /       pressed return)     – Remember event.preve...
FORM EVENTS• focus     –User has placed his cursor on an element or the      element is selected• blur     –The element ha...
PREVENTING DEFAULT EVENT BEHAVIOR$(“form”).sumbit(function(event) {  event.preventDefault();  // form will now not POST / ...
BINDING EVENTS• We’ve been using shortcuts     –You can see them all at http://api.jquery.com/      category/events• .bind...
.BIND - SAME THING! $(“body”).mousemove(function(event) {   var x = event.pageX;   var y = event.pageY;   console.log(“Mou...
.ON LET’S YOU DO MULTIPLE AT ONCE $(“body”).on(“mousedown mouseup”, function(event) {   var x = event.pageX;   var y = eve...
TIMERS• Timers let us execute code after a period of  time, or over and over again at a set interval.• setTimeout(function...
TIMERS• When a timer is set, a timer id is returned. We  can use this to stop the timer.• clearTimeout(id);• clearInterval...
TIMERS - TIMEOUT EXAMPLE function timetest() {   console.log(“1 second has passed!”); } var timerId = setTimeout(timetest,...
TIMERS - INTERVAL EXAMPLE function timetest() {   console.log(“1 second has passed!”); } var timerId = setInterval(timetes...
NOW LET’S MAKE A COLOR PICKER21
22
Upcoming SlideShare
Loading in...5
×

ev

116

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
116
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "ev"

    1. 1. EVENTS + TIMERS
    2. 2. AGENDA• Mouse Events• Keyboard Events• Form Events• .bind(), .unbind(), and .on() functions• Timers2
    3. 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 button3
    4. 4. MOUSE EVENTS• mousemove –user has moved the mouse over the element• All mouse events give you position on the mouse – event.pageX – event.pageY4
    5. 5. MOUSE EVENTS$(“body”).mousemove(function(event) { var x = event.pageX; var y = event.pageY; console.log(“Mouse at”, x, y);});5
    6. 6. PREVENTING DEFAULT EVENT BEHAVIOR$(“body”).click(function(event) { event.preventDefault();});6
    7. 7. EXPERIMENT - MOUSE EVENTS7
    8. 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.html8
    9. 9. KEYBOARD EVENTS$(“#test-input”).keyup(function(event) { if(event.which == 13) { alert(“Pressed Enter!”); }});9
    10. 10. EXPERIMENT - KEYBOARD EVENTS10
    11. 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 element11
    12. 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. 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. 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. 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. 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. 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 delay17
    18. 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. 19. TIMERS - TIMEOUT EXAMPLE function timetest() { console.log(“1 second has passed!”); } var timerId = setTimeout(timetest, 1000);19
    20. 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. 21. NOW LET’S MAKE A COLOR PICKER21
    22. 22. 22

    ×