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 • Create functions that resolve the differences between the event models

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

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

Working with Events

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>

Working with Events • Event Handlers

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;

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

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

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

Working with Events • Assigning an Event Handler

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

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

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;

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;

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

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

Introducing the DOM Event Model

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)

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

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

Creating a Cross-Browser Event Model

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

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

Working with Event Objects • The Internet Explorer Event Object

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

Working with Event Objects • The DOM Event Object

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

Creating the grabIt() Function • Determining the Event Source

Creating the grabIt() Function • Determining the Event Coordinates

Creating the grabIt() Function • Calculating the Distance from the Pointer

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

Creating the moveIt() Function

Creating the dropIt() Function

Redefining the Drag-and-Drop Feature • Keeping Dragged Items on Top

Redefining the Drag-and-Drop Feature • Returning a Dragged Item to Its Starting Point

Redefining the Drag-and-Drop Feature • Canceling the selectStart Event

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

Formatting a Dragged Object

Formatting a Dragged Object • Changing the Color

Working with the Double-Click Event

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

Working with the Event Model