05 action reaction- events

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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