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

Loading in 2 Seconds...

play fullscreen
1 / 56

Working with the Event Model - PowerPoint PPT Presentation


  • 191 Views
  • Updated on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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