Events

The pain that is JavaScript events done easily using jQuery.

Transcript

1. Events
   Responding to user actions in awesome ways
   

   View Slide

2. Every DOM element has events
   that can trigger JavaScript.
   

   View Slide

3. Example Events
   • Mouse click
   • Mouse over and out
   • Page or image load
   • Form submit
   • Keyboard keystroke
   

   View Slide

4. Inconsistent Across Browsers
   http://www.quirksmode.org/dom/events/index.html
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. jQuery Events
    Events without the cross-browser hangover
    

    View Slide

11. ready
    Binds a function to be executed when the DOM is
    ready to be traversed and manipulated
    http://docs.jquery.com/Events/ready
    

    View Slide

12. // stuff right here will run immediately
    $(document).ready(function() {
    // anything in here will only
    // run when the page first loads
    });
    // stuff right here will run immediately
    

    View Slide

13. This is needed when you run
    JavaScript that is in different files or in
    the of your HTML document.
    

    View Slide

14. Demos
    http://teaching.johnnunemaker.com/capp-30550/examples/page-load-win/
    http://teaching.johnnunemaker.com/capp-30550/examples/page-load-fail/
    http://teaching.johnnunemaker.com/capp-30550/examples/page-load-from-external-javascript/
    

    View Slide

15. Mouse and Keyboard
    Related Events
    click, double click, keydown, keyup, keypress,
    mousedown, mouseenter, mouseleave, mousemove,
    mouseout, mouseover, mouseup, scroll
    

    View Slide

16. bind
    Bind a function to an event for all matched elements.
    http://docs.jquery.com/Events/bind
    

    View Slide

17. get all a elements and bind to their
    click event the anonymous function.
    $('a').bind('click', function(event) {
    alert('You just clicked a link!');
    });
    

    View Slide

18. $('a').bind('click', function(event) {
    this; // clark kent DOM element just like .each
    $(this); // superman jQuery object
    });
    

    View Slide

19. jQuery Event Object
    Normalizes event object across browsers.
    Guaranteed to be first argument to every bound function.
    http://docs.jquery.com/Events/jQuery.Event
    

    View Slide

20. $('a').bind('click', function(event) {
    event;
    });
    $('a').bind('click', function(evt) {
    evt;
    });
    $('a').bind('click', function(e) {
    e;
    });
    Name it whatever you want,
    these are the common ones.
    event, evt, e
    

    View Slide

21. Event Shortcuts
    

    View Slide

22. click
    Binds a function to the click event of
    each matched element
    http://docs.jquery.com/Events/click#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/click-event/
    

    View Slide

23. $('#foo').click(function(event) {
    alert('foo was clicked!');
    });
    $('#foo').bind('click', function(event) {
    alert('foo was clicked!');
    });
    These are the same thing
    

    View Slide

24. double click
    Binds a function to the double click
    event of each matched element
    http://docs.jquery.com/Events/dblclick#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/double-click-event/
    

    View Slide

25. $('#foo').dblclick(function(event) {
    alert('foo was double clicked!');
    });
    $('#foo').bind('dblclick', function(event) {
    alert('foo was double clicked!');
    });
    

    View Slide

26. keypress
    Binds a function to the keypress
    event for each matched element
    http://docs.jquery.com/Events/keypress#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/keypress-event/
    

    View Slide

27. $('#foo').keypress(function(event) {
    alert('key pressed in #foo');
    });
    $('#foo').bind('keypress', function(event) {
    alert('key pressed in #foo');
    });
    

    View Slide

28. mouseover/mouseout
    Bind a function to the mouseover or
    mouseout event of each matched element.
    http://docs.jquery.com/Events/mouseover#fn
    http://docs.jquery.com/Events/mouseout#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/mouseovermouseout/
    

    View Slide

29. $('#foo').mouseover(function(event) {
    alert('i haz ur mouse');
    });
    $('#foo').mouseover(function(event) {
    alert('ur mouse escaped');
    });
    

    View Slide

30. mousemove
    Bind a function to the mousemove
    event of each matched element.
    http://docs.jquery.com/Events/mousemove#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/mousemove-event/
    

    View Slide

31. $('#foo').mousemove(function(event) {
    $(this).text('x: ' + event.pageX + ' y: ' + event.pageY);
    });
    

    View Slide

32. scroll
    Bind a function to when document view is scrolled
    http://docs.jquery.com/Events/scroll#fn
    http://teaching.johnnunemaker.com/capp-30550/examples/scroll-event/
    

    View Slide

33. $(window).scroll(function(event) {
    alert('you scrolled');
    });
    

    View Slide

34. Assignment11
    http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-events/
    

    View Slide