New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1
Working with the Event Model

• Creating a Drag-and-Drop Shopping Cart

2
Objectives

• 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

3
Objectives

• 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

4
Objectives

• 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

5
Working with Events
6
Working with Events
7
Working with Events
8
Working with Events

• Event Handlers
• One common way of responding to an event is by
  adding an event handler attribute to an elements
  tag
• ltelement onevent "script" ...gt ... lt/elementgt

9
Working with Events

• Event Handlers

10
Working 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

11
Working with Events

• Event Handlers as Object Properties
• One of the main disadvantages of handling events
  as object properties is the inability to include
  a functions parameter values in a property
• In addition, you can assign only one function at
  a time to a particular object and event

12
Working with Events

• Event Handlers as Script Elements
• Can also invoke event handlers as attributes of
  the script element
• ltscript type"text/javascript" for"id"
  event"onevent"gt

13
Working 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.links0.onclickdisableLink
• function disableLink()
• return false

14
Working with Events

• Assigning an Event Handler

15
Introducing 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

16
Introducing 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

17
Introducing 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.cancelBubbletrue
• To turn event bubbling back on, run the command
• event.cancelBubble false

18
Introducing 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

19
Introducing 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

20
Introducing 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

21
Introducing the DOM Event Model
22
Introducing 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)

23
Introducing 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()

24
Creating a Cross-Browser Event Model

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

25
Creating a Cross-Browser Event Model
26
Working 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

27
Working 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

28
Working with Event Objects

• The Internet Explorer Event Object

29
Working 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

30
Working with Event Objects

• The DOM Event Object

31
Creating 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

32
Creating the grabIt() Function

• Determining the Event Source

33
Creating the grabIt() Function

• Determining the Event Coordinates

34
Creating the grabIt() Function

• Determining the Event Coordinates

35
Creating the grabIt() Function

• Calculating the Distance from the Pointer

36
Creating the grabIt() Function

• Calculating the Distance from the Pointer

37
Creating 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

38
Creating the moveIt() Function
39
Creating the moveIt() Function
40
Creating the dropIt() Function
41
Redefining the Drag-and-Drop Feature

• Keeping Dragged Items on Top

42
Redefining the Drag-and-Drop Feature

• Returning a Dragged Item to Its Starting Point

43
Redefining the Drag-and-Drop Feature

• Returning a Dragged Item to Its Starting Point

44
Redefining the Drag-and-Drop Feature

• Canceling the selectStart Event

45
Formatting a Dragged Object

• Mouse pointers can be defined using an objects
  style properties
• object.style.cursorcursorType
• Can also define the pointer style in a CSS style
  declaration
• cursor cursorType

46
Formatting a Dragged Object
47
Formatting a Dragged Object

• Changing the Color

48
Working with the Double-Click Event
49
Working with the Double-Click Event
50
Working with the Mouse Button

• In the DOM event model, the button values are
  0left, 1middle, 2right
• In the Internet Explorer event model, these
  values are 0left, 2right, 4middle
• For Netscape 6 the values are 1left, 2middle,
  3right
• Right and middle mouse buttons usually have
  default actions
• May not wish to interfere with these default
  actions

51
Working 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

52
Working with Keyboard Events

• Examining Key Codes

53
Working with Keyboard Events

• Creating the KeyDrag() function

54
Working 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 keys
• altKey
• 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

55
Tips 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