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



The pain that is JavaScript events done easily using jQuery.


John Nunemaker

November 15, 2010


  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

  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
  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

  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

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

    + event.pageY); });
  32. scroll Bind a function to when document view is scrolled
  33. $(window).scroll(function(event) { alert('you scrolled'); });

  34. Assignment11