Events

The pain that is JavaScript events done easily using jQuery.

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