CHAPTER 5: ACTION/REACTIONMaking Pages Come Alive with Events

Your pages can respond to events

Causing your pages to respond to mouse events

• click• dblclick• mouseup and mousedown• mouseover and mouseout• mousemove

Responding to document and window events

• load• resize• scroll• unload

Form events

submitreset

changefocus and blur

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);• … 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);});

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