1 / 55

Working with the Event Model

Working with the Event Model. Creating a Drag-and-Drop Shopping Cart. 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

ermin
Download Presentation

Working with the Event Model

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Working with the Event Model Creating a Drag-and-Drop Shopping Cart New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  5. Working with Events New Perspectives on JavaScript, Comprehensive

  6. Working with Events New Perspectives on JavaScript, Comprehensive

  7. Working with Events New Perspectives on JavaScript, Comprehensive

  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> New Perspectives on JavaScript, Comprehensive

  9. Working with Events • Event Handlers New Perspectives on JavaScript, Comprehensive

  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; New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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"> New Perspectives on JavaScript, Comprehensive

  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; } New Perspectives on JavaScript, Comprehensive

  14. Working with Events • Assigning an Event Handler New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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; New Perspectives on JavaScript, Comprehensive

  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; New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  21. Introducing the DOM Event Model New Perspectives on JavaScript, Comprehensive

  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) New Perspectives on JavaScript, Comprehensive

  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() New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  25. Creating a Cross-Browser Event Model New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  28. Working with Event Objects • The Internet Explorer Event Object New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  30. Working with Event Objects • The DOM Event Object New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  32. Creating the grabIt() Function • Determining the Event Source New Perspectives on JavaScript, Comprehensive

  33. Creating the grabIt() Function • Determining the Event Coordinates New Perspectives on JavaScript, Comprehensive

  34. Creating the grabIt() Function • Determining the Event Coordinates New Perspectives on JavaScript, Comprehensive

  35. Creating the grabIt() Function • Calculating the Distance from the Pointer New Perspectives on JavaScript, Comprehensive

  36. Creating the grabIt() Function • Calculating the Distance from the Pointer New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  38. Creating the moveIt() Function New Perspectives on JavaScript, Comprehensive

  39. Creating the moveIt() Function New Perspectives on JavaScript, Comprehensive

  40. Creating the dropIt() Function New Perspectives on JavaScript, Comprehensive

  41. Redefining the Drag-and-Drop Feature • Keeping Dragged Items on Top New Perspectives on JavaScript, Comprehensive

  42. Redefining the Drag-and-Drop Feature • Returning a Dragged Item to Its Starting Point New Perspectives on JavaScript, Comprehensive

  43. Redefining the Drag-and-Drop Feature • Returning a Dragged Item to Its Starting Point New Perspectives on JavaScript, Comprehensive

  44. Redefining the Drag-and-Drop Feature • Canceling the selectStart Event New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

  46. Formatting a Dragged Object New Perspectives on JavaScript, Comprehensive

  47. Formatting a Dragged Object • Changing the Color New Perspectives on JavaScript, Comprehensive

  48. Working with the Double-Click Event New Perspectives on JavaScript, Comprehensive

  49. Working with the Double-Click Event New Perspectives on JavaScript, Comprehensive

  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 New Perspectives on JavaScript, Comprehensive

More Related