Save 37% off PRO during our Black Friday Sale! »

Events

 Events

The pain that is JavaScript events done easily using jQuery.

88bc30284c6a424b63a92aad27d0ba36?s=128

John Nunemaker
PRO

November 15, 2010
Tweet

Transcript

  1. Events Responding to user actions in awesome ways

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

  3. Example Events • Mouse click • Mouse over and out

    • Page or image load • Form submit • Keyboard keystroke
  4. Inconsistent Across Browsers http://www.quirksmode.org/dom/events/index.html

  5. None
  6. None
  7. None
  8. None
  9. None
  10. jQuery Events Events without the cross-browser hangover

  11. ready Binds a function to be executed when the DOM

    is ready to be traversed and manipulated http://docs.jquery.com/Events/ready
  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
  13. This is needed when you run JavaScript that is in

    different files or in the <head> of your HTML document.
  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/

  15. Mouse and Keyboard Related Events click, double click, keydown, keyup,

    keypress, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, scroll
  16. bind Bind a function to an event for all matched

    elements. http://docs.jquery.com/Events/bind
  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!'); });
  18. $('a').bind('click', function(event) { this; // clark kent DOM element just

    like .each $(this); // superman jQuery object });
  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
  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
  21. Event Shortcuts

  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/
  23. $('#foo').click(function(event) { alert('foo was clicked!'); }); $('#foo').bind('click', function(event) { alert('foo

    was clicked!'); }); These are the same thing
  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/
  25. $('#foo').dblclick(function(event) { alert('foo was double clicked!'); }); $('#foo').bind('dblclick', function(event) {

    alert('foo was double clicked!'); });
  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/
  27. $('#foo').keypress(function(event) { alert('key pressed in #foo'); }); $('#foo').bind('keypress', function(event) {

    alert('key pressed in #foo'); });
  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/
  29. $('#foo').mouseover(function(event) { alert('i haz ur mouse'); }); $('#foo').mouseover(function(event) { alert('ur

    mouse escaped'); });
  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/
  31. $('#foo').mousemove(function(event) { $(this).text('x: ' + event.pageX + ' y: '

    + event.pageY); });
  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/
  33. $(window).scroll(function(event) { alert('you scrolled'); });

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