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

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

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

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

Attachment and the Event Object

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

codepen.io/codefoster/pen/jaIDb

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

codepen.io/codefoster/pen/uvonH

Browser Events

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

codepen.io/codefoster/pen/gAEfy

Document Loading Events

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

codepen.io/codefoster/pen/aoweb

Form Events

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

Keyboard Events

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

Mouse Events

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

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