1. Working with the Event Model
DHTML Tutorial 4 Creating a Drag-and-Drop Shopping Cart for Games Etc.
New Perspectives on DHTML, 2e
Tutorial 4

2. New Perspectives on DHTML, 2e
Objectives
Investigate ways of running event handlers
Learn about the three main event models
Learn how to respond to mouse actions
Learn how to create drag-and-drop objects on your Web page
Learn how to respond to keyboard actions
New Perspectives on DHTML, 2e
Tutorial 4

3. Setting up the Games Etc. Web Page
New Perspectives on DHTML, 2e
Tutorial 4

4. Setting up the Games Etc. Web Page
getObject(o)
Converts the object ID string, “o”, into an object reference
placeIt(object, x, y)
Places the object at the page coordinate (x, y)
getXCoord(object)
Returns the x-coordinate of the object on the page
getYCoord(object)
Returns the y-coordinate of the object on the page
New Perspectives on DHTML, 2e
Tutorial 4

5. Setting up the Games Etc. Web Page
withinIt(x, y, object)
Returns “true” if the (x, y) coordinates lie within the boundaries of the object; otherwise, returns “false”
setZ(object, z)
Returns the z-index value of the object
colorIt(object, c)
Changes the text and border color of the object to “c”
New Perspectives on DHTML, 2e
Tutorial 4

6. Setting up the Games Etc. Web Page withinIt() Function
There is no property for the bottom or right coordinates
Calculate by adding width and height properties:
top
left
height
width
right = left + width bottom = top + height
New Perspectives on DHTML, 2e
Tutorial 4

7. New Perspectives on DHTML, 2e
Working with Events
Events are actions that can be initiated
by the user
by the browser or
by another software program
The most common way to work with an event is through an event handler
New Perspectives on DHTML, 2e
Tutorial 4

8. Event Handlers as Tag Properties
There are several ways to add event handlers
To add an event handler property: <tag event_handler=“function()”>
Where tag is the HTML tag name
Where event_handler is the name of the event handler
Where function() is the function that runs in response to the event
New Perspectives on DHTML, 2e
Tutorial 4

9. Event Handlers as Tag Properties
Example of an event handler as a tag property: <input type=“Button” onClick=“calc()” />
Event handlers are case insensitive; onMouseOver is the same as onmouseover
This method is supported by NS and IE versions 3.0 and up
Not all events are supported by both IE and NS browsers
NS 4’s event handlers apply to only a few specific tags
New Perspectives on DHTML, 2e
Tutorial 4

10. Event Handlers with <script> Tags
To invoke an event handler using the <script> tag: <script for=“id” event=“event_handler”>
Where id is the id of an element
Where event_handler is the event
Works only in IE 4.0 and above
This approach is seldom used
New Perspectives on DHTML, 2e
Tutorial 4

11. Event Handlers as Object Properties
To assign an event handler to an object: object.event_handler = function;
Where object is the object
Where event_handler is the event
Where function is the name of the JavaScript function that runs in response to the event
Supported by all three DOMs
New Perspectives on DHTML, 2e
Tutorial 4

12. Event Handlers as Object Properties
Example of an event handler assigned to an object: window.onload=StartPage;
The name of the function is used; it is not a function call
The name of the event handler must be in lower case
You cannot pass parameters to the function
The assignment of an event handler must occur after the object is loaded
New Perspectives on DHTML, 2e
Tutorial 4

13. Canceling Event Actions
Events often have associated default actions
To cancel default actions, return “false” from the event handler function:
<script> document.links[0].onclick=DisableLink; function DisableLink() { return false; } </script>
New Perspectives on DHTML, 2e
Tutorial 4

14. The Netscape 4 Event Model
Events cascade from parent object through to target object
You must capture the event and assign a function
New Perspectives on DHTML, 2e
Tutorial 4

15. New Perspectives on DHTML, 2e
Capturing an Event
To capture an event in NS 4:
object.captureEvents(Event.EVENT_TYPE)
Where object is the object in which the event is captured
Where EVENT_TYPE is the type of event
Use the OR operator to capture several events at once: object.captureEvents(Event.EVENT_TYPE | Event.EVENT_TYPE | Event.EVENT_TYPE)
New Perspectives on DHTML, 2e
Tutorial 4

16. New Perspectives on DHTML, 2e
Capturing an Event
New Perspectives on DHTML, 2e
Tutorial 4

17. Assigning a Function to an Event
To cause a Web page to respond to a captured event, apply a function to the event: object.event = function;
Where object is the object in which the event is captured
Where event is the event in lowercase letters
Where function is the name of the function
New Perspectives on DHTML, 2e
Tutorial 4

18. Releasing, Routing, and Redirecting Events in Netscape 4
To release an event: object.releaseEvents(Event.EVENT_TYPE);
To route an event down the DOM hierarchy: object.routeEvent(event);
To redirect an event to a new object: new_object.handleEvent(event);
New Perspectives on DHTML, 2e
Tutorial 4

19. Internet Explorer Event Model
The event “bubbles up” from the target element to the top of the hierarchy
Events are automatically propagated from one level to the next
You do not need to use the captureEvents() method
New Perspectives on DHTML, 2e
Tutorial 4

20. Internet Explorer Event Model
New Perspectives on DHTML, 2e
Tutorial 4

21. Canceling Event Bubbling
In the IE event model, events continue bubbling up the object hierarchy even after encountering an event handler
To cancel event bubbling: event.cancelBubble = true;
To cancel the default action of an event: event.returnValue=false;
New Perspectives on DHTML, 2e
Tutorial 4

22. Attaching and Detaching Events
IE 5.0 and above provides the attachEvent() method that allows more than one function to be attached to a particular event
To attach an event: object.attachEvent(“event”, “function”)
To detach an event: object.detachEvent(“event”, “function”)
New Perspectives on DHTML, 2e
Tutorial 4

23. New Perspectives on DHTML, 2e
The W3C Event Model
Event first cascades from parent object through to target object (capture phase)
The event reaches the target (target phase)
Event then bubbles up from target object to top of hierarchy (bubble phase)
New Perspectives on DHTML, 2e
Tutorial 4

24. New Perspectives on DHTML, 2e
The W3C Event Model
An event listener detects when a particular event has reached an object
To create an event listener: object.addEventListener(“event”, “function”, capture)
Where object is an object on the page
Where event is an event handler
Where function is the function that runs in response to the event
New Perspectives on DHTML, 2e
Tutorial 4

25. New Perspectives on DHTML, 2e
The W3C Event Model
To create an event listener (cont.): object.addEventListener(“event”, “function”, capture)
Where capture is a Boolean variable that indicates when to apply the event handler
Use “true” to capture on route to target
Use “false” to capture in the bubbling stage
To remove an event listener: object.removeEventListener(“event”, “function”, capture)
New Perspectives on DHTML, 2e
Tutorial 4

26. Working with Event Objects
To work with events, you must know:
how each DOM reacts to events
how to get information about the event
Information about the event is stored in the event object
The three event models create and use event objects differently
New Perspectives on DHTML, 2e
Tutorial 4

27. Referencing the Event Object
To access IE DOM event properties, use either: window.event.property event.property
NS4 and W3C DOMs create an event object as a parameter of the function called by the event handler
The event is automatically passed to the function
The name typically given by the programmer is “e” or “evt”
New Perspectives on DHTML, 2e
Tutorial 4

28. Referencing the Event Object
NS 4 and W3C DOM event object example: document.onmousedown=grabit; function grabIt(e) { JavaScript command block }
To access event properties for this example: e.property
New Perspectives on DHTML, 2e
Tutorial 4

29. Event Object Properties
Event Property
W3C
NS 4
NS 6/7 IE
Element in which the event occurred
target currentTarget
target
srcElement
Type of event that has occurred
type
The (x, y) coordinates of event within screen
screenX, screenY
The (x, y) coordinates of event within browser
clientX, clientY
New Perspectives on DHTML, 2e
Tutorial 4

30. Event Object Properties
Event Property
W3C
NS 4
NS 6/7 IE
The (x, y) coordinates of event within page
pageX, pageY
The (x, y) coordinates of event within an object
layerX, layerY x, y
layerX, layerY
x, y
The offset of the event in the x and y direction from container element
offsetX, offsetY
An integer representing the modifier key
modifiers
New Perspectives on DHTML, 2e
Tutorial 4

31. Event Object Properties
Event Property
W3C
NS 4
NS 6/7 IE
Boolean values indicating whether Alt, Ctrl, and Shift were pressed
altKey, ctrlKey, shiftKey
Keyboard key that caused the event
keyCode
which
Mouse button that caused the event
button
New Perspectives on DHTML, 2e
Tutorial 4

32. Event Object Properties
To get screen coordinates in IE: event.screenX; event.screenY;
To get screen coordinates in NS4/W3C: e.screenX; e.screenY;
Where e represents the event object parameter name
The name is typically “e” or “evt”
New Perspectives on DHTML, 2e
Tutorial 4

33. Determining Event Position
For NS4 DOM: e.pageX e.pageY
For IE DOM: event.clientX event.clientY
For W3C DOM: e.clientX e.clientY
Where e represents the NS4/W3C event object parameter name
Properties are approximate equivalents
New Perspectives on DHTML, 2e
Tutorial 4

34. Identifying the Event Target
Each of the three DOMs requires a different approach to determining the reference to the event target
Netscape 4 does not provide a property that stores the reference to the object of the event
Instead, you must loop through the layers collection to determine which positioned element lies within the (x, y) coordinates of the event
New Perspectives on DHTML, 2e
Tutorial 4

35. Identifying the Event Target
For NS4, call the withinIt() function for each object in the layers collection until the object of the event is located:
inside = false; for (i=0; i<document.layers.length; i++) { inside=withinIt(MouseX, MouseY, document.layers[i]); if (inside) dragItem = document.layers[i]; }
New Perspectives on DHTML, 2e
Tutorial 4

36. Identifying the Event Target
IE provides the srcElement property that stores a reference to the object of the event: dragItem=event.srcElement;
W3C provides the currentTarget property that may be used to retrieve a reference to the target object: dragItem=e.currentTarget;
Where e represents the W3C event object parameter name
New Perspectives on DHTML, 2e
Tutorial 4

37. Calculating the Distance from the Pointer
When dragging an object, the object’s upper left corner should be a constant distance away from the mouse as it moves across the page
New Perspectives on DHTML, 2e
Tutorial 4

38. Creating the moveIt() Function
To move an object across the page, move the object in relation to the mouse pointer
New Perspectives on DHTML, 2e
Tutorial 4

39. Creating the dropIt() Function
A function to drop an object should run in response to the mouseup event
The mousemove event must be canceled for NS 4
New Perspectives on DHTML, 2e
Tutorial 4

40. Keeping Dragged Items on Top
You should prevent dragged items from passing behind other items
Set the dragged item’s z-index to the highest value on the page
New Perspectives on DHTML, 2e
Tutorial 4

41. Canceling the selectStart Event
Selection of text is the default action for dragging through a Web page
In IE, text may remain selected
To prevent this, cancel the selectStart event:
document.onselectstart=stopSelect;
function stopSelect() {
return false; }
New Perspectives on DHTML, 2e
Tutorial 4

42. Working with Mouse Pointers
Both IE and W3C DOMs provide support for changing default mouse pointers
For CSS: cursor: cursor_type;
For JavaScript: object.style.cursor=“cursor_type”;
Where cursor_type is the type of mouse pointer to be displayed
New Perspectives on DHTML, 2e
Tutorial 4

43. Working with Mouse Pointers
New Perspectives on DHTML, 2e
Tutorial 4

44. Changing the Color of Dragged Items
To change border and text color in IE and W3C: object.style.color = color; object.style.borderColor=color;
New Perspectives on DHTML, 2e
Tutorial 4

45. Capturing a Keyboard Event
keydown: The user has pressed a key down
keyup: The user has released a key
keypress: The user has pressed and released a key
New Perspectives on DHTML, 2e
Tutorial 4

46. New Perspectives on DHTML, 2e
Examining Key Codes
To determine which key the user pressed in NS 4: e.which
In IE: event.keyCode
In W3C: e.keyCode;
To convert ASCII or Unicode a text character: character=String.fromCharCode(key );
New Perspectives on DHTML, 2e
Tutorial 4

47. New Perspectives on DHTML, 2e
Modifier Keys
To test for a modifier key press in NS 4: e.modifiers & Event._MASK e.modifiers & Event.CONTROL_MASK e.modifiers & Event.SHIFT_MASK
In IE: event.altKey event.ctrlKey event.shiftKey
In W3C: e.altKey e.ctrlKey e.shiftKey
New Perspectives on DHTML, 2e
Tutorial 4

48. Working with Mouse Button Events
For NS4: e.which
For IE: event.button
For W3C: e.button
New Perspectives on DHTML, 2e
Tutorial 4

49. New Perspectives on DHTML, 2e
Review
There are three main event models: NS 4 – event capture IE – event bubbling W3C – event capture and event bubbling
Understanding the event models allows you to access event objects programmatically
CSS styles may be dynamically changed using JavaScript
Mouse and keyboard actions may have attached event handlers
New Perspectives on DHTML, 2e
Tutorial 4