05 action reaction- events
-
Upload
rap-payne -
Category
Technology
-
view
588 -
download
2
Transcript of 05 action reaction- events
![Page 1: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/1.jpg)
CHAPTER 5: ACTION/REACTIONMaking Pages Come Alive with Events
![Page 2: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/2.jpg)
Your pages can respond to events
![Page 3: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/3.jpg)
Causing your pages to respond to mouse events
• click• dblclick• mouseup and mousedown• mouseover and mouseout• mousemove
![Page 4: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/4.jpg)
Responding to document and window events
• load• resize• scroll• unload
![Page 5: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/5.jpg)
Form events
submitreset
changefocus and blur
![Page 6: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/6.jpg)
Keyboard events
•keypress•keydown and keyup
![Page 7: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/7.jpg)
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});
![Page 8: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/8.jpg)
$(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(); });});
![Page 9: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/9.jpg)
Other jQuery events• $(selector).hover(mouseIn, mouseOut)• $(selector).toggle(clickOn, clickOff)
![Page 10: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/10.jpg)
The event object collects data about the event that occurred• pageX• pageY• screenX• screenY• altKey• ctrlKey• metaKey• shiftKey• which• target• data
![Page 11: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/11.jpg)
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; }});
![Page 12: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/12.jpg)
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');});
![Page 13: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/13.jpg)
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);});
![Page 14: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/14.jpg)
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
![Page 15: 05 action reaction- events](https://reader036.fdocuments.us/reader036/viewer/2022081400/554e246bb4c90511778b50c2/html5/thumbnails/15.jpg)
Lab• Introducing Events tutorial pp. 165 – 168• One-page FAQ tutorial pp. 180 - 183