Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.