Events

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/