05 action reaction- events
Transcript of 05 action reaction- events
![Page 1: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/1.jpg)
CHAPTER 5: ACTION/REACTION Making Pages Come Alive with Events
![Page 2: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/2.jpg)
Your pages can respond to events
![Page 3: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/3.jpg)
Our pages can respond to mouse events • click • dblclick • mouseup and mousedown • mouseover and mouseout • mousemove
![Page 4: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/4.jpg)
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;!});!
![Page 5: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/5.jpg)
Responding to document and window events
• load • resize • scroll • unload
![Page 6: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/6.jpg)
![Page 7: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/7.jpg)
Keyboard events
• keypress • keydown and keyup
![Page 8: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/8.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 9: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/9.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 10: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/10.jpg)
Other jQuery events • $(selector).hover(mouseIn, mouseOut) • $(selector).toggle(clickOn, clickOff)
![Page 11: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/11.jpg)
The event object collects data about the event that occurred • pageX • pageY • screenX • screenY • altKey • ctrlKey • metaKey • shiftKey • which • target • data
![Page 12: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/12.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 13: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/13.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 14: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/14.jpg)
You can bind() other events, too
• Allows for great flexibility $(selector).bind('nameOfEvent', function);!
![Page 15: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/15.jpg)
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);!});!
![Page 16: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/16.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 17: 05 action reaction- events](https://reader033.fdocuments.us/reader033/viewer/2022052822/554e256cb4c9056b798b502b/html5/thumbnails/17.jpg)
Lab • Introducing Events tutorial pp. 165 – 168 • One-page FAQ tutorial pp. 180 - 183