Presentation is loading. Please wait.

Presentation is loading. Please wait.

Working with the Event Model

Similar presentations


Presentation on theme: "Working with the Event Model"— Presentation transcript:

1 Working with the Event Model
Creating a Drag-and-Drop Shopping Cart Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

3 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

4 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

5 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Working with Events Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

6 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Working with Events Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

7 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Working with Events Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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> Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

9 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Working with Events Event Handlers Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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; Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

12 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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"> Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

13 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
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; } Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

14 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Working with Events Assigning an Event Handler Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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; Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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; Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

21 Introducing the DOM Event Model
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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) Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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() Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

25 Creating a Cross-Browser Event Model
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

28 Working with Event Objects
The Internet Explorer Event Object Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

30 Working with Event Objects
The DOM Event Object Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

32 Creating the grabIt() Function
Determining the Event Source Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

33 Creating the grabIt() Function
Determining the Event Coordinates Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

34 Creating the grabIt() Function
Determining the Event Coordinates Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

35 Creating the grabIt() Function
Calculating the Distance from the Pointer Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

36 Creating the grabIt() Function
Calculating the Distance from the Pointer Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

38 Creating the moveIt() Function
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

39 Creating the moveIt() Function
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

40 Creating the dropIt() Function
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

41 Redefining the Drag-and-Drop Feature
Keeping Dragged Items on Top Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

42 Redefining the Drag-and-Drop Feature
Returning a Dragged Item to Its Starting Point Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

43 Redefining the Drag-and-Drop Feature
Returning a Dragged Item to Its Starting Point Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

44 Redefining the Drag-and-Drop Feature
Canceling the selectStart Event Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

46 Formatting a Dragged Object
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

47 Formatting a Dragged Object
Changing the Color Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

48 Working with the Double-Click Event
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

49 Working with the Double-Click Event
Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, 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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

52 Working with Keyboard Events
Examining Key Codes Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

53 Working with Keyboard Events
Creating the KeyDrag() function Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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; Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 Tutorial 15 New Perspectives on HTML, XHTML, and DHTML, Comprehensive


Download ppt "Working with the Event Model"

Similar presentations


Ads by Google