Working with the Event Model - PowerPoint PPT Presentation

makya
working with the event model l.
Skip this Video
Loading SlideShow in 5 Seconds..
Working with the Event Model PowerPoint Presentation
Download Presentation
Working with the Event Model

play fullscreen
1 / 56
Download Presentation
Working with the Event Model
198 Views
Download Presentation

Working with the Event Model

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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 element’s tag <element onevent = "script" ...> ... </element>

  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 function’s 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 <script type="text/javascript" for="id" event="onevent">

  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.links[0].onclick=disableLink; 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 modeldeveloped for the Internet Explorer browser, and the DOM event modeldeveloped 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.cancelBubble=true; • 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 phaseas the event moves down the object hierarchy • A target phasein which the event reaches the object from which the event originated • A bubbling phasein which the event moves back up the object hierarchy • To run a function, you create an event listenerthat 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 user’s 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 object’s style properties object.style.cursor=cursorType; • 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 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