XP Tutorial 8 New Perspectives on JavaScript, Comprehensive1 Working with the Event Model Creating a...

Tutorial 8 New Perspectives on JavaScript, Comprehensive 1

Tutorial 8

Working with the Event Model

Creating a Drag-and-Drop Shopping Cart

XPObjectives

• Learn different methods for applying event handlers

• Study event propagation in the Internet Explorer event model

• Understand event propagation in the DOM event model

• Create functions that resolve the differences between the event models

XPObjectives

• Work with the properties of the event object under both models

• Identify the object that initiated an event• Determine the coordinates of a mouse event• Create objects that can be dragged and

dropped

XPObjectives

• Work with cursor styles • Create functions that respond to double-click

events• Determine which mouse button a user clicked• Work with keyboard events, including

determining which key a user pressed• Understand how to work with modifier keys

XPWorking with Events

• Event Handlers– One common way of responding to an event is by

adding an event handler attribute to an element’s tag

• Event Handlers

• Event Handlers as Object Properties– Another way to apply an event handler is to treat it

as an object property object.onevent = function– For example, to run the moveItem() function

whenever the mousemove event occurs within the item1 element, you could run the following JavaScript command:

document.getElementById("item1").onmousemove

=moveItem;

• Event Handlers as Object Properties– One of the main disadvantages of handling events

as object properties is the inability to include a function’s parameter values in a property

– In addition, you can assign only one function at a time to a particular object and event

• Event Handlers as Script Elements– Can also invoke event handlers as attributes of the

script element<script type="text/javascript" for="id" event="onevent">

• Using an Event Handler to Cancel an Action– Can cancel the default action for any event by

assigning a function to the event handler that returns the Boolean value false

document.links[0].onclick=disableLink;

function disableLink() {

return false;

• Assigning an Event Handler

XPIntroducing the Internet Explorer Event Model

• The way that a browser works with events is called its event model

• Consider two event models in this tutorial: the Internet Explorer event model developed for the Internet Explorer browser, and the DOM event model developed by the W3C for DOM Level 2

• The Internet Explorer event model is supported by Internet Explorer version 5 and higher

• The DOM event model is supported by Netscape 6 and 7, Firefox, and other Mozilla browsers.

• A third event model was developed for Netscape 4 and Netscape 4.7

• Event Bubbling– In the Internet Explorer

Event model, events are initiated at the bottom of the document tree and rise to the top of the object hierarchy in a process known as event bubbling

• Canceling Event Bubbling– In some scripts you may want to prevent an event

from propagating up the document tree– To prevent event bubbling from occurring, run the

following command when the event reaches the level at which you want the propagation to stop

event.cancelBubble=true;– To turn event bubbling back on, run the command

event.cancelBubble = false;

• Canceling Event Bubbling– To cancel an event at the current level as well as

all levels above the object, run the command

event.returnValue = false;

• Attaching and Detaching Events– The Internet Explorer event model overcomes this

limitation with the attachEvent() method

object.attachEvent(onevent, function)– To detach one of these functions from the

mouseover event, you would use the detachEvent() method

XPIntroducing the DOM Event Model

• In the DOM model, an event starts at the top and moves down the object hierarchy until it reaches the target of the event; at that point, the event bubbles back up the object hierarchy

• In the DOM model, an event is split into three phases– A capture phase as the event moves down the object

hierarchy– A target phase in which the event reaches the object from

which the event originated– A bubbling phase in which the event moves back up the

object hierarchy

• To run a function, you create an event listener that detects when a particular event has reached an object in the document

object.addEventListener(event, function, capture)

• Can prevent an event from propagating through the object hierarchy using the method

evt.stopPropagation()• To cancel an event entirely, use the method

evt.preventDefault()

XPCreating a Cross-Browser Event Model

• Since two event models exist, with different approaches and syntax, you need to determine which event model a user’s browser supports and then run commands appropriate for that model

XPCreating a Cross-Browser Event Model

XPWorking with Event Objects

• If the user has pressed a key on the keyboard, you may want to know which key was pressed

• This type of information is stored in an event object

• The Internet Explorer Event Object– In the Internet Explorer event model, the event

object has the object reference windowObject.event– If you are dealing with events in the current

browser window, you can drop the windowObject reference

– One of the more important properties is srcElement– The srcElement property is akin to the “this”

keyword

• The Internet Explorer Event Object

• The DOM Event Object– In the DOM event model, the event object is

inserted as a parameter of whatever function responds to the event

– Give the event object any parameter name, but the standard practice is to name the parameter “e” or “evt”

– For the DOM event model, the object that initiated an event is returned using the target property

• The DOM Event Object

XPCreating the grabIt() Function

• Function has to perform the following tasks– Identify the object that lies beneath the pointer– Determine the page coordinates of the mouse

pointer at the moment the user depresses the mouse button

– Calculate the difference between the coordinates of the mouse pointer and the coordinates of the selected object

– Assign functions to the object that run whenever the user moves the mouse pointer or releases the mouse button

• Determining the Event Source

• Determining the Event Coordinates

• Calculating the Distance from the Pointer

XPCreating the moveIt() Function

• The moveIt() function needs to perform the following tasks– Determine the current location of the mouse

pointer– Maintain dragItem at a constant distance from the

mouse pointer

XPCreating the dropIt() Function

XPRedefining the Drag-and-Drop Feature

• Keeping Dragged Items on Top

• Returning a Dragged Item to Its Starting Point

• Canceling the selectStart Event

XPFormatting a Dragged Object

• Mouse pointers can be defined using an object’s style properties

object.style.cursor=cursorType;• Can also define the pointer style in a CSS

style declaration

cursor: cursorType

• Changing the Color

XPWorking with the Double-Click Event

XPWorking with the Mouse Button

• In the DOM event model, the button values are 0=left, 1=middle, 2=right

• In the Internet Explorer event model, these values are 0=left, 2=right, 4=middle

• For Netscape 6 the values are 1=left, 2=middle, 3=right• Right and middle mouse buttons usually have default

actions• May not wish to interfere with these default actions

XPWorking with Keyboard Events

• Capturing a Keyboard Event– Three main keyboard events are available to work

with• keydown: The user has pressed a key down• keyup: The user has released a key• keypress: The user has pressed and released a key

• Examining Key Codes

• Creating the KeyDrag() function

• Modifier Keys– Both event models use the following properties of the event

object to determine the state of the Alt, Ctrl, and Shift keysaltKey;

ctrlKey;

shiftKey;

– Each of these properties returns a Boolean value indicating whether the modifier key is being pressed

– The DOM event model also supports the event object property metaKey;

XPTips for Working with Events

• Create customized cross-browser functions that resolve the differences among the event models

• Position any objects that will be dragged and dropped using inline styles prior to running the drag-and-drop commands

• In a drag-and-drop application, provide users with additional visual feedback that an object is being moved, such as color changes and pointer changes

• Capture keyboard and mouse events to make your Web page more accessible to users with disabilities

XP Tutorial 8 New Perspectives on JavaScript, Comprehensive1 Working with the Event Model Creating a...

Documents

Transcript of XP Tutorial 8 New Perspectives on JavaScript, Comprehensive1 Working with the Event Model Creating a...

ThinkPad Twist Convertible Laptops and Cart. Cart Sign Up Go to Outlook All Public Folders Cart 1 (US) or Cart 3 (US) to check cart availability. Cart.

XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.

XP Tutorial 6 New Perspectives on JavaScript, Comprehensive1 Working with Windows and Frames Enhancing a Web Site with Interactive Windows.

CaRT v Wingfield, CaRT Skeleton for Appeal

ADULT CRASH CART - ced.muhealth.org 2014 Crash Cart Adult... · Adult Crash Cart First Supply To Expire Front of cart- Arrest Board Top of cart Clipboard Zoll- checklist Exam gloves-

139CBI - J.D. Honigberg International, Inc.jdhmedical.com/wp-content/pdfs/Armstrong Medical 2015 Catalog.pdf · Sexual Assault Exam Cart ER Supply Cart Crash Cart Isolation Cart Endoscopy

Service Description and Expectations - IPageThe Weebly Drag-and-Drop builder also makes it very easy to sell products or services online, without the need for a separate shopping cart

Pinnacle Cart 3.6 Shopping Cart Manual

FREE AJAX ADD TO CART - Tigren · 2017. 9. 19. · Ajax Cart Configuration: Admin Panel => AJAX SUITE => Ajax Cart => General options Message after adding products to cart Cart information.

QUICK CART - Amazon S3Cart+-+Brochure.pdf · QUICK CART SPECIFICATIONS RCP-251 REV 6/14 QUICK CART SPECIFICATION GUIDE Description Executive Quick Cart – Large Executive Quick Cart

Google Expedition Cart - storage.bestbuy.comstorage.bestbuy.com/pacsales/...Buy-Expedition-Cart... · Google Expedition® Cart Use this cart to store, transport, and charge up to

XP Tutorial 2 New Perspectives on JavaScript, Comprehensive1 Working with Operators and Expressions Creating a New Year’s Day Countdown Clock.

40 Rudiments 30. Flam Drag. 4 dailydrumlesson.com 31. Drag 32. Single Drag Tap 33. Double Drag Tap 35. Single Dragadiddle 39. Double Ratamacue 34. Lesson 25 37. Drag Paradiddle #2

Shopping Cart. Search and display product information Add item to cart View cart contents Check out.

Drag Lecture 6 Chapter 3. What is Drag? What are different types of Drag?

Percussion/Timpani - Advanced · IV. DRAG RUDIMENTS 31. Drag * 32. Single Drag Tap * 33. Double Drag Tap * 34. Lesson 25 * 35. Single Dragadiddle 36. Drag Paradiddle #1 * 37. Drag

XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.

California Hot Dog Cart - Hot Dog Cart Company

ThinkPad Twist Convertible Laptops and Cart. Cart Sign Up Go to Outlook Public Folders US Cart 1 or US Cart 2 (Twists) to check cart availability.

XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.