• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
05 action reaction- events

05 action reaction- events






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • pp. 157 - 158
  • p. 159
  • p. 160
  • p. 161submit and reset are form-levelchange, focus, and blur are field-level
  • pp. 162 - 164
  • pp. 169 -170
  • pp. 171 – 173toggle can actually accept any number of functions, each taking its turn.
  • pp. 173 – 175varkeyPressed = String.fromCharCode(theEvent.which);target – The element that was acted upon. Example: which div was clicked on? Which link was hovered over?
  • p. 175
  • pp. 175 - 176
  • pp. 177 – 178Could use this to arbitrarily populate the person object and have the div say something different each time.

05 action reaction- events 05 action reaction- events Presentation Transcript

  • CHAPTER 5:ACTION/REACTIONMaking Pages Come Alive with Events
  • Your pagescan respondto events
  • Causing your pages to respond to mouseevents• click• dblclick• mouseup and mousedown• mouseover and mouseout• mousemove
  • Responding to document and windowevents • load • resize • scroll • unload
  • Keyboard events• keypress• keydown and keyup
  • Event programming is a three-stepprocess1. Select the element(s)2. Assign an event to them3. Pass the event a functionfunction getResponse() { // Do something}$(#go).click(getResponse);• … or more simply …$(#go).click(function () { //Do something});
  • $(document).ready()• Fires when the document loads.• Important because jQuery involves binding events to elements in the DOM• But you cant bind to something that doesnt exist yet• ready() allows the binding to wait until the DOM elements are there and loaded$(document).ready(function() { $(#aDiv).hover(function() { PopulateDiv(); });});
  • Other jQuery events• $(selector).hover(mouseIn, mouseOut)• $(selector).toggle(clickOn, clickOff)
  • The event object collects data about theevent that occurred• pageX• pageY• screenX• screenY• altKey• ctrlKey• metaKey• shiftKey• which• target• data
  • preventDefault() and returnfalse prevent the normalactionExample:$(#aForm).submit(function(evt) { if (someSituation) { // Dont submit form evt.preventDefault(); } elseif (someOtherSituation) { // Also dont submit form return false; }});
  • Removing events• Disassociating functions with previously-defined events• $(selector).unbind(nameOfEvent);• Example:$(a).hover(function() { showToolTip(this); }, function() { hideToolTip(this); }});$(#disable).click(function() { $(a).unbind(mouseover);});
  • You can bind() other events, too• Allows for great flexibility• $(selector).bind(nameOfEvent, function);• … or …• $(selector).bind(nameOfEvent, someData, function);• Example:var person = {first:Stan,last:Marsh};$(a).bind(focus, person, function(evt) { $(#hDiv).innerText(evt.data.last + + evt.data.first);});
  • Conclusion• Mouse events: click(), mouseOver(), mouseOut(), mouseUp(), mouseDown(), and mouseMove()• Document events: ready(), load() and unload()• Keyboard events: keyPress(), keyDown(), and keyUp()• Window events: scroll() and resize()• Form events: submit() and reset()• Form element events: focus(), blur(), and change()• jQuery multi-function events: hover() and toggle()• Event programming – the 3-step process• Anonymous functions• Event object – pageX, pageY, altKey, which, target, data, etc.• Preventing default behavior – two ways• Unbinding events• Bind allows us to pass data to an event or even bind multiple handlers to one event
  • Lab• Introducing Events tutorial pp. 165 – 168• One-page FAQ tutorial pp. 180 - 183