Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Events

 Events

The pain that is JavaScript events done easily using jQuery.

John Nunemaker

November 15, 2010
Tweet

More Decks by John Nunemaker

Other Decks in Programming

Transcript

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

    • Page or image load • Form submit • Keyboard keystroke
  2. ready Binds a function to be executed when the DOM

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

    different files or in the <head> of your HTML document.
  5. Mouse and Keyboard Related Events click, double click, keydown, keyup,

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

    elements. http://docs.jquery.com/Events/bind
  7. get all a elements and bind to their click event

    the anonymous function. $('a').bind('click', function(event) { alert('You just clicked a link!'); });
  8. $('a').bind('click', function(event) { this; // clark kent DOM element just

    like .each $(this); // superman jQuery object });
  9. jQuery Event Object Normalizes event object across browsers. Guaranteed to

    be first argument to every bound function. http://docs.jquery.com/Events/jQuery.Event
  10. $('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
  11. 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/
  12. 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/
  13. 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/
  14. 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/
  15. 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/
  16. 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/