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 functionfu...
$(document).ready()• Fires when the document loads.• Important because jQuery involves binding events to  elements in the ...
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• shi...
preventDefault() and returnfalse prevent the normalactionExample:$(#aForm).submit(function(evt) { if (someSituation) {    ...
Removing events• Disassociating functions with previously-defined events• $(selector).unbind(nameOfEvent);• Example:$(a).h...
You can bind() other events, too• Allows for great flexibility• $(selector).bind(nameOfEvent, function);• … or …• $(select...
Conclusion• Mouse events:    click(), mouseOver(), mouseOut(), mouseUp(), mouseDown(), and    mouseMove()•   Document even...
Lab• Introducing Events tutorial pp. 165 – 168• One-page FAQ tutorial pp. 180 - 183
05 action reaction- events
Upcoming SlideShare
Loading in …5
×

05 action reaction- events

622
-1

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
622
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

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.
  • 05 action reaction- events

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

    ×