1. Introduction to jQuery
Jeremy Foster | Developer Evangelist
Rachel Appel | Independent Consultant

2. Course Topics Introduction to jQuery 01 | jQuery 101 05 | Effects
02 | Selection
06 | Ajax and Async
03 | Manipulating the DOM
07 | Libraries
04 | Events

3. Jeremy Foster | @codefoster Rachel Appel | @RachelAppel
04 | Events
Jeremy Foster
Rachel Appel

4. Module Overview Attachment and the Event object Browser events
Document loading events
Form events
Keyboard events
Mouse events

5. Attachment and the Event Object

6. Attaching to Events .on() and .off() .bind() and .unbind()
.delegate() and .undelegated()
.one()
.live() and .die()
.trigger() and .triggerHandler()

7. codepen.io/codefoster/pen/jaIDb

8. The Event Object Holds all of the event properties
Helpful properties include…
.currentTarget
.type
.which
.timestamp
.target
.data

9. codepen.io/codefoster/pen/uvonH

10. Browser Events

11. Browser Events .error() Called if an element is not loaded correctly
.resize() When the size of the browser window changes
.scroll() When the user scrolls to a different place in an element

12. codepen.io/codefoster/pen/gAEfy

13. Document Loading Events

14. Document Loading Events
.load() When an element is being loaded
.ready() When the DOM is loaded and ready (minus content like images) Use $(function) as a shortcut
.unload() Opposite of load, when an element is being unloaded

15. codepen.io/codefoster/pen/aoweb

16. Form Events

17. Form Events .change() When an element’s value changes
.select() When the user makes a text selection inside
.focus() When an element receives focus
.submit() When the user is attempting to submit a form
.blur() When an element loses focus
.focusin() When an element or any nested elements receives focus
.focusout() When an element loses focus

18. Keyboard Events

19. Keyboard Events .keydown() When a key is pressed down
.keypress() When the browser registers keyboard input (may vary by browser!) Not triggered by Shift, Esc, delete, etc.
.keyup() When a key returns to the up position

20. Mouse Events

21. Mouse Events .click() .mouseover() .dblclick() .mouseup() .hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()

22. Summary Attachment and the Event object Browser events
Document loading events
Form events
Keyboard events
Mouse events