1.  2008 Pearson Education, Inc. All rights reserved. 1 13 JavaScript: Events

2.  2008 Pearson Education, Inc. All rights reserved. 2 The wisest prophets make sure of the event first. — Horace Walpole Do you think I can listen all day to such stuff? — Lewis Carroll

3.  2008 Pearson Education, Inc. All rights reserved. 3 The user should feel in control of the computer; not the other way around. This is achieved in applications that embody three qualities: responsiveness, permissiveness, and consistency. — Inside Macintosh, Volume 1 Apple Computer, Inc., 1985 We are responsible for actions performed in response to circumstances for which we are not responsible. — Allan Massie

4.  2008 Pearson Education, Inc. All rights reserved. 4 OBJECTIVES In this chapter you will learn:  The concepts of events, event handlers and event bubbling.  To create and register event handlers that respond to mouse and keyboard events.  To use the event object to get information about an event.  To recognize and respond to many common events.

5.  2008 Pearson Education, Inc. All rights reserved. 5 13.1 Introduction 13.2 Registering Event Handlers 13.3 Event onload 13.4 Event onmousemove, the event Object, and this 13.5 Rollovers with onmouseover and onmouseout 13.6 Form Processing with onfocus and onblur 13.7 More Form Processing with onsubmit and onreset 13.8 Event Bubbling 13.9 More Events 13.10 Wrap-Up 13.11 Web Resources

6.  2008 Pearson Education, Inc. All rights reserved. 6 13.1 Introduction JavaScript events – allow scripts to respond to user interactions and modify the page accordingly Events and event handling – help make web applications more responsive, dynamic and interactive

7.  2008 Pearson Education, Inc. All rights reserved. 7 13.2 Registering Event Handlers Functions that handle events Assigning an event handler to an event on a DOM node is called registering an event handler Two models for registering event handlers – Inline model treats events as attributes of XHTML elements – Traditional model assigns the name of the function to the event property of a DOM node In the inline model, the value of the XHTML attribute is a JavaScript statement to be executed when the event occurs In the traditional model, the value of the event property of a DOM node is the name of a function to be called when the event occurs Traditional registration of event handlers enables quick and easy assignment of event handlers to many elements using repetition statements, instead of adding an inline event handler to each XHTML element

8.  2008 Pearson Education, Inc. All rights reserved. 8 Outline registering.html (1 of 3) Function to handle the onclick event Registers the event handler using the traditional model

9.  2008 Pearson Education, Inc. All rights reserved. 9 Outline registering.html (2 of 3) Registers the event handler using the inline model

10.  2008 Pearson Education, Inc. All rights reserved. 10 Outline registering.html (3 of 3)

11.  2008 Pearson Education, Inc. All rights reserved. 11 Common Programming Error 13.1 Putting quotes around the function name when registering it using the inline model would assign a string to the onclick property of the node—a string cannot be called.

12.  2008 Pearson Education, Inc. All rights reserved. 12 Common Programming Error 13.2 Putting parentheses after the function name when registering it using the inline model would call the function immediately and assign its return value to the onclick property.

13.  2008 Pearson Education, Inc. All rights reserved. 13 13.3 Event onload onload event fires whenever an element finishes loading successfully If a script in the head attempts to get a DOM node for an XHTML element in the body, getElementById returns null because the body has not yet loaded

14.  2008 Pearson Education, Inc. All rights reserved. 14 Outline onload.html (1 of 2) Calls function updateTime every second Updates the timer display in the soFar element of the document

15.  2008 Pearson Education, Inc. All rights reserved. 15 Outline onload.html (2 of 2) As soon as the body has loaded, startTimer is called

16.  2008 Pearson Education, Inc. All rights reserved. 16 Common Programming Error 13.3 Trying to get an element in a page before the page has loaded is a common error. Avoid this by putting your script in a function using the onload event to call the function.

17.  2008 Pearson Education, Inc. All rights reserved. 17 13.4 Event onmouseMove, the event Object and this onmousemove event fires whenever the user moves the mouse event object stores information about the event that called the event-handling function – ctrlKey property contains a boolean which reflects whether the Ctrl key was pressed during the event – shiftKey property reflects whether the Shift key was pressed during the event In an event-handling function, this refers to the DOM object on which the event occurred this keyword enables one event handler to apply a change to one of many DOM elements, depending on which one received the event

18.  2008 Pearson Education, Inc. All rights reserved. 18 13.4 Event onmouseMove, the event Object and this (Cont.) Internet Explorer and Firefox do not implement the same event models Firefox and other W3C-compliant browsers (e.g., Safari, Opera) pass the event object as an argument to the event-handling function Internet Explorer, on the other hand, stores the event object in the event property of the window object

19.  2008 Pearson Education, Inc. All rights reserved. 19 Outline draw.html (1 of 5) Sets the dimensions of a table of cells that will act as a canvas Eliminates space between table cells Creates table of cells for the canvas

20.  2008 Pearson Education, Inc. All rights reserved. 20 Outline draw.html (2 of 5) Assigns processMouseMove as the event handler for the cell’s onmousemove event Gets the event object in IE Gets the event object in Firefox Determines which key is pressed and colors the cell accordingly this refers to the cell that received the event

21.  2008 Pearson Education, Inc. All rights reserved. 21 Outline draw.html (3 of 5)

22.  2008 Pearson Education, Inc. All rights reserved. 22 Outline draw.html (4 of 5)

23.  2008 Pearson Education, Inc. All rights reserved. 23 Outline draw.html (5 of 5)

24.  2008 Pearson Education, Inc. All rights reserved. 24 Common Programming Error 13.4 Although you can omit the tbody element in an XHTML table, without it you cannot append tr elements as children of a table using JavaScript. While Firefox treats appended rows as members of the table body, Internet Explorer will not render any table cells that are dynamically added to a table outside a thead, tbody or tfoot element.

25.  2008 Pearson Education, Inc. All rights reserved. 25 Fig. 13.4 | Some event object properties.

26.  2008 Pearson Education, Inc. All rights reserved. 26 13.5 Rollovers with onmouseover and onmouseout When the mouse cursor enters an element, an onmouseover event occurs for that element When the mouse cursor leaves the element, an onmouseout event occurs for that element Creating an Image object and setting its src property preloads the image The event object stores the node on which the action occurred – In Internet Explorer, this node is stored in the event object’s srcElement property – In Firefox, it is stored in the event object’s target property

27.  2008 Pearson Education, Inc. All rights reserved. 27 Outline Onmouseoverout.html (1 of 8) Preloads the heading images

28.  2008 Pearson Education, Inc. All rights reserved. 28 Outline Onmouseoverout.html (2 of 8) Stores the return value of getTarget to variable target —we can’t use this because we have not defined an event handler for each element in the document Changes the heading’s image to image2 If target has a defined id (true of table cells and the heading), changes its color to that id

29.  2008 Pearson Education, Inc. All rights reserved. 29 Outline Onmouseoverout.html (3 of 8) Replaces image2 with image1 If the element’s id is defined, makes the displayed text equal to the id Returns the targeted node in both Internet Explorer and Firefox Registers the onmouseover and onmouseout events in the document object

30.  2008 Pearson Education, Inc. All rights reserved. 30 Outline Onmouseoverout.html (4 of 8)

31.  2008 Pearson Education, Inc. All rights reserved. 31 Outline Onmouseoverout.html (5 of 8)

32.  2008 Pearson Education, Inc. All rights reserved. 32 Outline Onmouseoverout.html (6 of 8)

33.  2008 Pearson Education, Inc. All rights reserved. 33 Outline Onmouseoverout.html (7 of 8)

34.  2008 Pearson Education, Inc. All rights reserved. 34 Outline Onmouseoverout.html (8 of 8)

35.  2008 Pearson Education, Inc. All rights reserved. 35 Performance Tip 13.1 Preloading images used in rollover effects prevents a delay the first time an image is displayed.

36.  2008 Pearson Education, Inc. All rights reserved. 36 13.6 Form Processing with onfocus and onblur onfocus event fires when an element gains focus – i.e., when the user clicks a form field or uses the Tab key to move between form elements onblur fires when an element loses focus – i.e., when another control gains the focus

37.  2008 Pearson Education, Inc. All rights reserved. 37 Outline onfocusblur.html (1 of 4) Array of help messages

38.  2008 Pearson Education, Inc. All rights reserved. 38 Outline onfocusblur.html (2 of 4) Displays the corresponding help message in the div element at the bottom of the document When a user clicks into a field, the onfocus event is fired, which feeds the appropriate message number to function helpText in order to display the help message When an element loses focus, the onblur event is fired, and helpText(6) is called, clearing the old message from the screen

39.  2008 Pearson Education, Inc. All rights reserved. 39 Outline onfocusblur.html (3 of 4) div element where the help message is displayed

40.  2008 Pearson Education, Inc. All rights reserved. 40 Outline onfocusblur.html (4 of 4)

41.  2008 Pearson Education, Inc. All rights reserved. 41 13.7 More Form Processing with onsubmit and onreset onsubmit and onreset events fire when a form is submitted or reset, respectively Anonymous function – A function that is defined with no name – Created in nearly the same way as any other function, but with no identifier after the keyword function – Useful when creating a function for the sole purpose of assigning it to an event handler confirm method asks the users a question, presenting them with an OK button and a Cancel button – If the user clicks OK, confirm returns true ; otherwise, confirm returns false By returning either true or false, event handlers dictate whether the default action for the event is taken If an event handler returns true or does not return a value, the default action is taken once the event handler finishes executing

42.  2008 Pearson Education, Inc. All rights reserved. 42 Outline Onsubmitreset.html (1 of 3)

43.  2008 Pearson Education, Inc. All rights reserved. 43 Outline Onsubmitreset.html (2 of 3) Creates an anonymous function to register as an event handler for the onsubmit event Uses confirm to return a boolean stating whether or not the form should be submitted or reset

44.  2008 Pearson Education, Inc. All rights reserved. 44 Outline Onsubmitreset.html (3 of 3)

45.  2008 Pearson Education, Inc. All rights reserved. 45 13.8 Event Bubbling Event bubbling – The process whereby events fired in child elements “bubble” up to their parent elements – When an event is fired on an element, it is first delivered to the element’s event handler (if any), then to the parent element’s event handler (if any) If you intend to handle an event in a child element alone, you should cancel the bubbling of the event in the child element’s event-handling code by using the cancelBubble property of the event object

46.  2008 Pearson Education, Inc. All rights reserved. 46 Outline bubbling.html (1 of 3) Does not cancel bubbling, which is the default

47.  2008 Pearson Education, Inc. All rights reserved. 47 Outline bubbling.html (2 of 3) Cancels event bubbling Registers events for clicking in the two p elements, which are children of the document object Registers an event for the document object

48.  2008 Pearson Education, Inc. All rights reserved. 48 Outline bubbling.html (3 of 3)

49.  2008 Pearson Education, Inc. All rights reserved. 49 Common Programming Error 13.5 Forgetting to cancel event bubbling when necessary may cause unexpected results in your scripts.

50.  2008 Pearson Education, Inc. All rights reserved. 50 13.9 More Events The following slide contains a list of some events supported by both Firefox and Internet Explorer

51.  2008 Pearson Education, Inc. All rights reserved. 51 Fig. 13.9 | Cross-browser events. (Part 1 of 2.)

52.  2008 Pearson Education, Inc. All rights reserved. 52 Fig. 13.9 | Cross-browser events. (Part 2 of 2.)