Working with the Event Model

1
Working with the Event Model

• DHTML Tutorial 4Creating a Drag-and-Drop
  Shopping Cart for Games Etc.

2
Objectives

• Investigate ways of running event handlers
• Learn about the Netscape and Internet Explorer
  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

3
Custom Functions in GamesAPI.js
4
Custom Functions in GamesAPI.js
5
User-Defined Functions

• A custom function may also be called a UDF
• UDF (User-defined function)
• A function that is written by the programmer
  rather than a function built into the programming
  language
• Review the withinIt() function on page 4.04
• Purpose Determine whether coordinates are within
  the area of an object

6
withinIt User-Defined Function

• Parameters
• x the x-coordinate of a point on the Web page
• y the y-coordinate of a point of the Web page
• object reference to an object on the Web page

7
withinIt User-Defined Function

• Variables
• otop stores the y coordinate for the objects
  top
• obottom stores the y coordinate for the
  objects bottom
• oleft stores the x coordinate for the objects
  left side
• oright stores the x coordinate for the objects
  right side

8
withinIt User-Defined Function

• Since there is no property for the bottom or
  right coordinates, you must find the top and left
  coordinates and add the height and width
  measurements respectively
• right left width
• bottom top height

Top
Height
Left
Width
9
withinIt User-Defined Function

• To find the (x, y) coordinates of an objects top
  and left
• In NS 4
• object.top
• object.left
• In IE object.style.pixelTop
• object.style.pixelLeft

10
withinIt User-Defined Function

• To find the (x, y) coordinates of an objects top
  and left
• In NS 6 parseInt(object.style.top)
  parseInt(object.style.left)
• You must apply parseInt() because the top and
  left properties return both the measurement and
  unit (px, em, etc).

11
withinIt User-Defined Function

• Note Since the functions getXCoord() and
  getYCoord() return the top and left pixel
  coordinates, you may change your code to call
  these functions from the withinIt() function
  otop getYCoord(object) oleft
  getXCoord(object)

12
withinIt User-Defined Function

• To find the width and height of an object
• In NS 4
• object.clip.height
• object.clip.width
• In IE
• parseInt(object.style.height)
• parseInt(object.style.width)

13
withinIt User-Defined Function

• To find the width and height of an object
• In NS 6
• parseInt(object.style.height)
• parseInt(object.style.width)

14
Events

• Events are actions that can be initiated
• by the user
• by the browser or
• by another software program

15
Ways to Work with Events

• First method Add an event handler to an objects
  HTML taglta href onMouseOverchange()gt
• Event handlers are case insensitive onMouseOver
  is the same as onmouseover
• Event handlers are applied to a specific tag
• This method is supported by NS and IE 3.0 and up

16
Ways to Work with Events

• When adding an event handler to an objects HTML
  tag, be aware that
• Not all events are supported by both IE and NS
  browsers
• In NS 4, event handlers may be applied only to
  specific tags

17
Ways to Work with Events

• Second method Invoke an event handler using the
  ltscriptgt tag
• This works only in IE and thus is seldom used

18
Ways to Work with Events

• Third method Work with event handlers as object
  propertiesobject.event_handler function
• event_handler must be in lower case
• event_handler is applied to objects on the Web
  page
• Supported by NS and IE 4.0 and up
• Note You cannot pass parameters to the function!
  (But the event object will automatically be
  passed.)

19
Event Models

• Event models describe how browsers process events
• NS 4 event captureEvent begins at top of the
  DOM hierarchy and falls through to the target
  object
• IE event bubblingEvent begins at the target
  object and moves up through the hierarchy
• NS 6 event capture and event bubbling
  Round-trip down to and back from target event

20
Netscape 4 Event Model

• Event cascades from parent object through to
  target object
• Example The onMouseOver event is first
  recognized by the browser window, then the
  document window, then the object
• To call a function when an event occurs to a
  particular object
• Capture the event
• Assign a function to the event

21
NS 4 Capturing an Event

• Capturing an event notifies the Netscape
  browser that an event has occurred
• Use the captureEvents method
• object.captureEvents(Event.EVENT_TYPE)
• object is a reference to the object
• EVENT_TYPE is the type of event
• EVENT_TYPE is the event handler name without
  on
• EVENT_TYPE must be capitalized!

22
NS 4 Capturing an Event

• Syntax
• object.captureEvents(Event.EVENT_TYPE)
• object is a reference to the object
• EVENT_TYPE is the type of event
• EVENT_TYPE is the event handler name without
  on
• EVENT_TYPE must be in all caps!

23
NS 4 Capturing an Event

• Examples
• window.captureEvents(Event.DBLCLICK)
• document.captureEvents(Event.MOUSEOVER)
• Separate with to identify more than one event
• document.captureEvents(Event.MOUSEDOWN
  Event.MOUSEMOVE Event.MOUSEUP)

24
NS 4 Applying a Function to Event

• To cause a Web page to respond to a captured
  event, apply a function to the eventobject.event
  function
• event must be in lowercase
• function is the name of the function without the
  parentheses

25
NS 4 Example

• Putting it all together
• Capture the eventdocument.captureEvents(Event.MO
  USEDOWN)
• Assign the functiondocument.onmousedowngrabIt

26
NS 4 Additional Methods

• Releasing an eventdocument.releaseEvents(Event.M
  OUSEMOVE)
• Routing events to their targetsdocument.routeEve
  nts(Event.MOUSEMOVE)
• Redirecting Eventsdocument.links0.handleEvent(E
  vent.CLICK)

27
NS 4 Event Object

• When a function is applied to an event, Netscape
  creates an event object
• Contains information about the event
• The event is automatically passed to the called
  function as a parameter
• The name typically given in code is e or evt
  by the programmer
• Use the event objects properties to access
  information about the object

28
NS 4 Canceling Default Actions

• At times, you may wish to cancel default actions
  associated with events
• Examples of canceled default actions
• Cancel the loading of a target of a link
• Cancel text select with clicking and dragging
  over text
• In order to understand how to cancel these
  default actions, you should understand the order
  of the event life cycle

29
NS 4 Canceling Default Actions

• The event life cycle
• The event occurs
• If an event handler exists, the associated
  function is called
• Default actions of the event are fired providing
  the event is not canceled
• You may cancel the event (and associated default
  actions) by returning a value of false at the
  end of the event handler function
• Syntaxreturn false

30
Properties of NS 4 Event Model
31
Properties of NS 4 Event Model
32
Internet Explorer Event Model

• The event bubbles up from the target element to
  the top of the hierarchy
• This allows for more control over individual
  elements

33
IE Event Object

• Events are not captured as in NS
• The IE event object provides information
  regarding actions that take place within the Web
  browser
• To retrieve properties of an event use the
  followingwindow.event.property

34
IE Applying a Function to an Event

• To cause a Web page to respond to an event, apply
  a function to the event as you did in NS
  4object.event_handler function
• Exampledocument.onmousedowngrabIt

35
IE Canceling Default Actions

• Canceling event actions
• In addition to returning a false value from an
  event handler function, IE provides the
  returnValue event property that may be used to
  cancel events
• Syntaxevent.returnValue false //cancels
  default actionevent.returnValue true
  //restores default action

36
IE - Canceling Event Bubbling

• Use the cancelBubble property to override event
  bubblingevent.cancelBubble true

37
Properties of IE Event Model
38
Properties of IE Event Model
39
Properties of IE Event Model
40
Netscape 6 Event Model

• Event first cascades from parent object through
  to target object (capture phase)
• The event reaches the target
• Event then bubbles up from target object to top
  of hierarchy (bubble phase)

41
NS 6 Event Listener

• To associate a function with an objects event,
  Netscape 6 introduces the concept of an event
  listener
• An event listener is an object that
• recognizes the occurrence of an event
• calls a function in response to that event

42
NS 6 Event Listener

• Syntaxobject.addEventListener(eventType,
  functionName, capture)
• object is the object name
• eventType is a string containing the event the
  event handler without the on prefix
• functionName is the name of the function.
• No parameters may be passed
• The function name appears without the ().

43
NS 6 Event Listener

• Syntaxobject.addEventListener(eventType,
  functionName, capture)
• capture is a Boolean value
• Use true to capture on route to target
• Use false to capture on the bubbling stage
• Note event listeners call a function only once
  during an event

44
NS 6 Event Listener

• To remove an event listener use the
  removeEventListener method
• Syntaxobject.removeEventListener(eventType,
  functionName, capture)
• All parameters in the above syntax are the same
  as used for the addEventListener method

45
NS 6 Event Object

• As with NS 4, when a function is applied to an
  event, NS 6 creates the event object
• Contains information about the event
• The event is automatically passed to the called
  function as a parameter
• The name typically given in code is e or evt
  by the programmer
• Use the event objects properties to access
  information about the object

46
Properties of NS 6 Event Model
47
Properties of NS 6 Event Model
48
Properties of NS 6 Event Model
49
NS 6 Canceling Default Actions

• Canceling event actions
• As in Internet Explorer, you may prevent default
  event actions
• Examples
• Cancel the loading of a target of a link
• Cancel text select with clicking and dragging
  over text
• Syntaxevent.preventDefault()

50
NS 4 Determining Page Coordinates

• Syntaxe.pageXe.pageY
• Where e represents the NS event parameter
• The event parameter will be in the parameter list
  of the function header the name is typically e
  or evt and is chosen by the programmer
• Properties hold the (x, y) coordinates of the
  event

51
IE Determining Page Coordinates

• Syntaxevent.clientX document.body.scrollLeft
  event.clientY document.body.scrollTop
• Where event represents the Internet Explorer
  event object. This is NOT represented as a
  parameter in the function header.
• Internet Explorer measures coordinates only by
  the current content of the window. You must add
  in any portion that has been scrolled out of
  view scrollLeft and scrollRight.

52
NS 6 Determining Page Coordinates

• Syntaxe.clientXe.clientY
• Where e represents the NS event parameter.
• The e will be in the parameter list of the
  function header.

53
IE - Finding the Object of the Event

• Internet Explorer provides the srcElement
  property of the event object that stores a
  reference to the object of the event
• Syntaxevent.srcElement

54
NS 6 - Finding the Object of the Event

• Netscape 6 provides the target object that may be
  used to retrieve a reference to the target of the
  evente.target
• This target will be a node in NS 6 a node may
  be text, an attribute or a tag
• If the target property returns text, you must
  find the parent tag

55
NS 6 - Finding the Object of the Event

• First, determine if the target is text by using
  the nodeType property
• nodeType will store an integer representing the
  type of node element (1) , attribute (2), or
  text (3)if (e.target.nodeType 1)

56
NS 6 - Finding the Object of the Event

• Then, if the nodeType is text, you must find the
  surrounding tag
• You may move up the DOM hierarchy by using the
  parentNode property
• The parent node of text is always a
  tage.target.parentNode
• Syntax to find the object of the eventif
  (e.target.nodeType 1) e.target else
  e.target.parentNode

57
NS 6 - Finding the Object of the Event

• You may simplify your code by applying the ?
  operator which is another means of programming
  the if-else logic
• Syntaxcondition ? statement if true
  statement if false
• (e.target.nodeType 1) ? e.target
  e.target.parentNode)

58
NS 4 - Finding the Object of the Event

• 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

59
NS 4 - Finding the Object of the Event

• Since you already have the withinIt UDF created,
  you may call that function repeatedly from within
  a loop to loop through the layers collection
  until the object of the event is located
• Code
• for (i0 iltdocument.layers.length i)
• insidewithinIt(MouseX, MouseY,
  document.layersi)
• if (inside) dragItem document.layersi

60
indexOf() Method (NS 4, NS 6 IE)

• The indexOf() method determines whether a string
  of characters is found within a larger string of
  characters
• Return value
• If string is found, the return value is the
  numbered position of the beginning character of
  the string
• If string is not found, the return value is -1

61
Setting the z-Index (NS 4, NS 6 IE)

• Assuming that you have a reference to the object
  that is valid for the individual DOMs of IE and
  NS 6, you may use the same code to access or set
  the z-indexobject.style.zIndex value
• NS 4object.zIndex value

62
Mouse Pointers (IE and NS 6)

• Netscape 4 does not support changing of the mouse
  pointer
• Both IE and NS6 do support the CSS2 style to
  change default mouse pointers
• Syntax for the CSS2 rulecursor cursor_type
• Cursor type is a word identifying the specific
  type of cursor

63
Mouse Pointers (IE and NS6)

• There is some variation on the available cursors,
  their appearance, and their names
• Seehttp//webdesign.about.com/library/weekly/aa0
  81501a.htmhttp//developer.netscape.com/evangelis
  m/docs/articles/cursor/

64
Mouse Pointers (IE and NS 6)

• Aside from using CSS, you may also set the mouse
  pointer programmatically using JavaScript
• Again, assuming that you have a reference to the
  object that is valid for NS 6 or IE as
  appropriate, you may use the same
  syntaxobject.style.cursor cursor_type

65
Border and Text Color (IE and NS 6)

• Other CSS styles such as border and text color
  may be changed programmatically
• Syntax (IE and NS 6)object.style.color
  colorobject.style.borderColorcolor
• Equivalent JavaScript properties for two-word,
  hyphenated CSS styles are usually formed by
  removing the hyphen and capitalizing the second
  wordcss-style is changed to cssStyle for
  JavaScript

66
Keyboard Events

• kKeydown The user has begun pressing a key
• keypress The user has pressed and released a key
• keyup the user has released a key

67
Examining Key Codes

• NS 4 use the which property of the NS event
  objectkey e.which
• IE use the keyCode property of the IE event
  objectkey event.keyCode
• NS 6 for the keypress event use the charCode
  property of the NS event object. If passing value
  back to a calling function, use eval() for
  explicit conversion to numeric value.key
  e.keyCode

68
Modifier Keys

• NS 4 e.modifiers
• Where modifiers is a numeric value representing
  the modifier key being pressed
• IE event.altKeyevent.ctrlKeyevent.shiftKey

69
Modifier Keys

• For the keydown and keyup events, NS 6 provides
  the following properties for the NS event
  objecte.altKeye.shiftKeye.ctrlKey

70
Summary DHTML Tutorial 4

• Event handlers may be run in three ways
• Event models feature the following
• NS 4 event capture
• IE event bubbling
• NS 6 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