jQuery Events

0 views

Published on

Introduction to jQuery events.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
82
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery Events

  1. 1. Events Responding to user actions in awesome ways Thursday, November 12, 2009
  2. 2. Every DOM element has events that can trigger JavaScript. Thursday, November 12, 2009
  3. 3. Example Events • Mouse click • Mouse over and out • Page or image load • Form submit • Keyboard keystroke Thursday, November 12, 2009
  4. 4. Inconsistent Across Browsers http://www.quirksmode.org/dom/events/index.html Thursday, November 12, 2009
  5. 5. Thursday, November 12, 2009
  6. 6. Thursday, November 12, 2009
  7. 7. Thursday, November 12, 2009
  8. 8. Thursday, November 12, 2009
  9. 9. Thursday, November 12, 2009
  10. 10. jQuery Events Events without the cross-browser hangover Thursday, November 12, 2009
  11. 11. ready Binds a function to be executed when the DOM is ready to be traversed and manipulated http://docs.jquery.com/Events/ready Thursday, November 12, 2009
  12. 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 Thursday, November 12, 2009
  13. 13. This is needed when you run JavaScript that is in different files or in the <head> of your HTML document. Thursday, November 12, 2009
  14. 14. Demos http://teaching.johnnunemaker.com/capp-30550/examples/page-load-fail/ http://teaching.johnnunemaker.com/capp-30550/examples/page-load-win/ http://teaching.johnnunemaker.com/capp-30550/examples/page-load-from-external-javascript/ Thursday, November 12, 2009
  15. 15. Mouse and Keyboard Related Events click, double click, keydown, keyup, keypress, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, scroll Thursday, November 12, 2009
  16. 16. bind Bind a function to an event for all matched elements. http://docs.jquery.com/Events/bind Thursday, November 12, 2009
  17. 17. $('a').bind('click', function(event) { alert('You just clicked a link!'); }); get all a elements and bind to their click event the anonymous function. Thursday, November 12, 2009
  18. 18. $('a').bind('click', function(event) { this; // clark kent DOM element just like .each $(this); // superman jQuery object }); Thursday, November 12, 2009
  19. 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 Thursday, November 12, 2009
  20. 20. Name it whatever you want, these are the common ones. $('a').bind('click', function(event) { event; }); $('a').bind('click', function(evt) { evt; }); $('a').bind('click', function(e) { e; }); event, evt, e Thursday, November 12, 2009
  21. 21. Event Shortcuts Thursday, November 12, 2009
  22. 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/ Thursday, November 12, 2009
  23. 23. These are the same thing $('#foo').click(function(event) { alert('foo was clicked!'); }); $('#foo').bind('click', function(event) { alert('foo was clicked!'); }); Thursday, November 12, 2009
  24. 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/ Thursday, November 12, 2009
  25. 25. $('#foo').dblclick(function(event) { alert('foo was double clicked!'); }); $('#foo').bind('dblclick', function(event) { alert('foo was double clicked!'); }); Thursday, November 12, 2009
  26. 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/ Thursday, November 12, 2009
  27. 27. $('#foo').keypress(function(event) { alert('key pressed in #foo'); }); $('#foo').bind('keypress', function(event) { alert('key pressed in #foo'); }); Thursday, November 12, 2009
  28. 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/ Thursday, November 12, 2009
  29. 29. $('#foo').mouseover(function(event) { alert('i haz ur mouse'); }); $('#foo').mouseover(function(event) { alert('ur mouse escaped'); }); Thursday, November 12, 2009
  30. 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/ Thursday, November 12, 2009
  31. 31. $('#foo').mousemove(function(event) { $(this).text('x: ' + event.pageX + ' y: ' + event.pageY); }); Thursday, November 12, 2009
  32. 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/ Thursday, November 12, 2009
  33. 33. $(window).scroll(function(event) { alert('you scrolled'); }); Thursday, November 12, 2009
  34. 34. Assignment11 http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-events/ Thursday, November 12, 2009

×