Your SlideShare is downloading. ×
05 action reaction- events
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

05 action reaction- events

583

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
583
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • Transcript

    • 1. CHAPTER 5:ACTION/REACTIONMaking Pages Come Alive with Events
    • 2. Your pagescan respondto events
    • 3. Causing your pages to respond to mouseevents• click• dblclick• mouseup and mousedown• mouseover and mouseout• mousemove
    • 4. Responding to document and windowevents • load • resize • scroll • unload
    • 5. Keyboard events• keypress• keydown and keyup
    • 6. 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});
    • 7. $(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(); });});
    • 8. Other jQuery events• $(selector).hover(mouseIn, mouseOut)• $(selector).toggle(clickOn, clickOff)
    • 9. The event object collects data about theevent that occurred• pageX• pageY• screenX• screenY• altKey• ctrlKey• metaKey• shiftKey• which• target• data
    • 10. 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; }});
    • 11. 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);});
    • 12. 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);});
    • 13. 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
    • 14. Lab• Introducing Events tutorial pp. 165 – 168• One-page FAQ tutorial pp. 180 - 183

    ×