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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

05 action reaction- events

828
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
828
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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

Transcript

  • 1. CHAPTER 5: ACTION/REACTIONMaking Pages Come Alive with Events
  • 2. Your pagescan respondto events
  • 3. Our pages can respond to mouse events•  click•  dblclick•  mouseup and mousedown•  mouseover and mouseout•  mousemove
  • 4. There is no right-click, but you cansimulate one with bind$(selector).bind(contextmenu,function(e){! e.preventDefault();! //Do all your JavaScript magic here! return false;!});!
  • 5. Responding to document and windowevents • load • resize • scroll • unload
  • 6. Keyboard events• keypress• keydown and keyup
  • 7. 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!});!
  • 8. $(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();! });!});!
  • 9. Other jQuery events•  $(selector).hover(mouseIn, mouseOut)•  $(selector).toggle(clickOn, clickOff)
  • 10. The event object collects data about theevent that occurred•  pageX•  pageY•  screenX•  screenY•  altKey•  ctrlKey•  metaKey•  shiftKey•  which•  target•  data
  • 11. 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;! }!});!
  • 12. 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);!});!
  • 13. You can bind() other events, too•  Allows for great flexibility$(selector).bind(nameOfEvent, function);!
  • 14. Passing data to the event is possible withbind()$(selector).bind(nameOfEvent, someData, function);!•  Example:var person = {first:Stan,last:Marsh};!$(a).bind(focus, person, function(e) {! $(#hDiv).innerText(e.data.last +! + e.data.first);!});!
  • 15. 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
  • 16. Lab•  Introducing Events tutorial pp. 165 – 168•  One-page FAQ tutorial pp. 180 - 183