Working with the Event Model
-
Upload
damon-haney -
Category
Documents
-
view
20 -
download
0
description
Transcript of Working with the Event Model
![Page 1: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/1.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
1
XP
Tutorial 15
Working with the Event Model
Creating a Drag-and-Drop Shopping Cart
![Page 2: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/2.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
2
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
![Page 3: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/3.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
3
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
![Page 4: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/4.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
4
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
![Page 5: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/5.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
5
XPWorking with Events
![Page 6: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/6.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
6
XPWorking with Events
![Page 7: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/7.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
7
XPWorking with Events
![Page 8: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/8.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
8
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
<element onevent = "script" ...> ... </element>
![Page 9: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/9.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
9
XPWorking with Events
• Event Handlers
![Page 10: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/10.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
10
XPWorking with Events
• 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;
![Page 11: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/11.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
11
XPWorking with Events
• 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
![Page 12: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/12.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
12
XPWorking with Events
• Event Handlers as Script Elements– Can also invoke event handlers as attributes of the
script element<script type="text/javascript" for="id" event="onevent">
![Page 13: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/13.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
13
XPWorking with Events
• 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;
}
![Page 14: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/14.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
14
XPWorking with Events
• Assigning an Event Handler
![Page 15: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/15.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
15
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
![Page 16: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/16.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
16
XPIntroducing the Internet Explorer Event Model
• 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
![Page 17: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/17.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
17
XPIntroducing the Internet Explorer Event Model
• 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;
![Page 18: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/18.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
18
XPIntroducing the Internet Explorer Event Model
• 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;
![Page 19: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/19.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
19
XPIntroducing the Internet Explorer Event Model
• 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
![Page 20: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/20.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
20
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
![Page 21: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/21.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
21
XPIntroducing the DOM Event Model
![Page 22: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/22.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
22
XPIntroducing the DOM Event Model
• 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)
![Page 23: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/23.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
23
XPIntroducing the DOM Event Model
• 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()
![Page 24: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/24.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
24
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
![Page 25: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/25.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
25
XPCreating a Cross-Browser Event Model
![Page 26: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/26.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
26
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
![Page 27: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/27.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
27
XPWorking with Event Objects
• 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
![Page 28: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/28.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
28
XPWorking with Event Objects
• The Internet Explorer Event Object
![Page 29: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/29.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
29
XPWorking with Event Objects
• 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
![Page 30: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/30.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
30
XPWorking with Event Objects
• The DOM Event Object
![Page 31: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/31.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
31
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
![Page 32: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/32.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
32
XPCreating the grabIt() Function
• Determining the Event Source
![Page 33: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/33.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
33
XPCreating the grabIt() Function
• Determining the Event Coordinates
![Page 34: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/34.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
34
XPCreating the grabIt() Function
• Determining the Event Coordinates
![Page 35: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/35.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
35
XPCreating the grabIt() Function
• Calculating the Distance from the Pointer
![Page 36: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/36.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
36
XPCreating the grabIt() Function
• Calculating the Distance from the Pointer
![Page 37: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/37.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
37
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
![Page 38: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/38.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
38
XPCreating the moveIt() Function
![Page 39: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/39.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
39
XPCreating the moveIt() Function
![Page 40: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/40.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
40
XPCreating the dropIt() Function
![Page 41: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/41.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
41
XPRedefining the Drag-and-Drop Feature
• Keeping Dragged Items on Top
![Page 42: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/42.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
42
XPRedefining the Drag-and-Drop Feature
• Returning a Dragged Item to Its Starting Point
![Page 43: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/43.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
43
XPRedefining the Drag-and-Drop Feature
• Returning a Dragged Item to Its Starting Point
![Page 44: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/44.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
44
XPRedefining the Drag-and-Drop Feature
• Canceling the selectStart Event
![Page 45: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/45.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
45
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
![Page 46: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/46.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
46
XPFormatting a Dragged Object
![Page 47: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/47.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
47
XPFormatting a Dragged Object
• Changing the Color
![Page 48: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/48.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
48
XPWorking with the Double-Click Event
![Page 49: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/49.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
49
XPWorking with the Double-Click Event
![Page 50: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/50.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
50
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
![Page 51: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/51.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
51
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
![Page 52: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/52.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
52
XPWorking with Keyboard Events
• Examining Key Codes
![Page 53: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/53.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
53
XPWorking with Keyboard Events
• Creating the KeyDrag() function
![Page 54: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/54.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
54
XPWorking with Keyboard Events
• 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;
![Page 55: Working with the Event Model](https://reader035.fdocuments.in/reader035/viewer/2022062422/56812c4d550346895d90d4f0/html5/thumbnails/55.jpg)
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
55
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