CHAPTER 5: ACTION/REACTION Making Pages Come Alive with Events

Your pages can respond to events

Our pages can respond to mouse events •  click •  dblclick • mouseup and mousedown • mouseover and mouseout • mousemove

There is no right-click, but you can simulate one with bind $('selector').bind('contextmenu',function(e){! e.preventDefault();! //Do all your JavaScript magic here! return false;!});!

Responding to document and window events

• load • resize • scroll • unload

Keyboard events

• keypress • keydown and keyup

Event programming is a three-step process 1.  Select the element(s) 2.  Assign an event to them 3.  Pass the event a function function 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 can't bind to something that doesn't 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 the event that occurred •  pageX •  pageY •  screenX •  screenY •  altKey •  ctrlKey • metaKey •  shiftKey • which •  target •  data

preventDefault() and return false prevent the normal action Example: $('#aForm').submit(function(evt) {! if (someSituation) {! // Don't submit form! evt.preventDefault();! } elseif (someOtherSituation) {! // Also don't 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);!

Passing data to the event is possible with bind() $(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);!});!

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