2. Jozef Goetz contribution, 2015 1 ©1992-2014 by Pearson Education, Inc. All Rights Reserved.

3. Jozef Goetz contribution, 2015 2 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. Jozef Goetz contribution, 2015 3 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. Jozef Goetz contribution, 2015 4 13.1 Introduction 13.2 Reviewing Event onload 13.3 Event onmousemove, the event Object, and this 13.4 Rollovers with onmouseover and onmouseout 13.5 Form Processing with onfocus and onblur 13.6 More Form Processing with onsubmit and onreset 13.7 Event Bubbling 13.8 More Events 13.9 Web Resources

6. Jozef Goetz contribution, 2015 5  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 13.1 Introduction

7. Jozef Goetz contribution, 2015 6  Functions that handle events  Assigning an event handler (a function) to an event on a DOM (Document Object Model) node is called registering an event handler  The DOM gives you access to all the elements on a web page.  Using JavaScript, you can create, modify and remove elements in the page dynamically.  With the DOM, HTML elements can be treated as objects, and many attributes of HTML elements can be treated as properties of those objects.  Then, objects can be scripted (through their id attributes) with JavaScript to achieve dynamic effects. Registering Event Handlers 27 var traditional1 = document.getElementById( "traditional" ); 28 traditional1.onclick = handleEvent;

8. Jozef Goetz contribution, 2015 7  3 models for registering event handlers  Inline model treats events as attributes of HTML elements  Traditional model assigns the name of the function to the event property of a DOM node  1. In the inline model, the value of the HTML attribute is a JavaScript statement to be executed when the event occurs  2. 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 allows easy assignment of event handlers to many elements using repetition statements (see lines 25-29), instead of adding an inline event handler to each HTML element  3. W3C standard event-registration model (a modification of a traditional one) – next slide Registering Event Handlers 27 var traditional1 = document.getElementById( "traditional" ); 28 traditional1.onclick = handleEvent;

9. Jozef Goetz contribution, 2015 8 1.Create the my.html file with a link to my.css: my Count = 0 2. Create my.css file 3.Create my.js. Register start() on load: window.addEventListener( "load", start, false ); 4.Define start(): get by ID placeholder representations of HTML elements and register all needed functions for specific events. For example: function start() { count = document.getElementById( "count" ); document.getElementById( "incrementButton" ).addEventListener( "click", increment, false ); } 5.Define global (instance) variables and define functions to execute when the user triggers any event registered before. For example: var counter = 0; var count; function increment() {++counter; count.innerHTML = counter; } // end function increment Steps to create a W3C standard event-registration model for well structured JavaScript Website

10. Jozef Goetz contribution, 2015 9 registering.html Function to handle the onclick event Registers the event handler using the traditional model by setting onclick property. Assign the function (as data) handleEvent to div’s onclick property – no parentheses Delegate mechanism in C#. Traditional registration allows quick and easy assignment of event handlers to many elements

11. Jozef Goetz contribution, 2015 10 Outline registering.html (2 of 2) Registers the event handler using the inline model and assign its return value to the onclick property

12. Jozef Goetz contribution, 2015 11 Common Programming Error  Putting quotes around the function name when registering it using the traditional model would assign a string to the onclick property of the node - a string cannot be called.  28 traditional1.onclick = functionName; or  window.addEventListener( "load", functionName, false ); Putting parentheses after the function name when registering it would call the function immediately and assign its return value to the onclick property.

13. Jozef Goetz contribution, 2015 12 Outline Fig.13.2 onload.html (1 of 2) Calls function updateTime every second (1000 ms) Updates the timer display in the soFar element of the document If a script from called in the head attempts to get a DOM node for an HTML element in the body, getElementById returns null because the body has not yet loaded. Avoid this by putting your script in a function using the onload event to call the function.

14. Jozef Goetz contribution, 2015 13 onload.html (2 of 2) As soon as the body has loaded, startTimer is called

15. Jozef Goetz contribution, 2015 14  onload event fires whenever an element finishes loading successfully  If a script in the head attempts to get a DOM node for an HTML element in the body, getElementById returns null because the body has not yet loaded  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. 13.2 Reviewing Event onload

16. Jozef Goetz contribution, 2015 15  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 13.3 Event onmousemove, the event Object and this

17. Jozef Goetz contribution, 2015 16  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 “e” 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 13.3 Event onmousemove, the event Object and this

18. Jozef Goetz contribution, 2015 17 Outline Fig.13.3 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

19. Jozef Goetz contribution, 2015 Gets the event object in IE. Internet Explorer stores the event object in the event property of the window object 18 Outline draw.html (2 of 5) Assigns processMouseMove as the event handler for the cell’s onmousemove event It fires and calls processMouseMove whenever the user moves the mouse over the element Gets the event object in Firefox. W3C-compliant browsers (e.g., Safari, Opera) pass the event object “e” as an argument. e object stores info about the event that called the function Determines which key is pressed and colors the cell accordingly this refers to the cell (the DOM object) that received the event

20. Jozef Goetz contribution, 2015 19 Outline draw.html (3 of 5)

21. Jozef Goetz contribution, 2015 20

22. Jozef Goetz contribution, 2015 21 Common Programming Error  Although you can omit the tbody element in an HTML 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.

23. Jozef Goetz contribution, 2015 22 Fig. 13.5 | Some event object properties.

24. Jozef Goetz contribution, 2015 23  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 e stores the node on which the action occurred  In Internet Explorer, this node is stored in the event object’s srcElement property: target = e.srcElement - line 30, 68, 71  In Firefox, it is stored in the event object’s target property: target = e.target - - line 71 below 13.4 Rollovers with onmouseover and onmouseout

25. Jozef Goetz contribution, 2015 24 Outline Fig.13.5 Onmouseoverout.html (1 of 8) Preloads the heading images, nodes are stored in the event object’s srcElement property Preloading images used in rollover effects prevents a delay the first time an image is displayed. It works with IE

26. Jozef Goetz contribution, 2015 25 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, e.g. color =#0000FF

27. Jozef Goetz contribution, 2015 26 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 Internet Explorer stored in e.srcElement and Firefox stored in e.target Registers the onmouseover and onmouseout events in the document object by assigning functions mouseOver and mouseOut

28. Jozef Goetz contribution, 2015 27 Outline Onmouseoverout.html (4 of 8)

29. Jozef Goetz contribution, 2015 28 Outline Onmouseoverout.html (5 of 8)

30. Jozef Goetz contribution, 2015 29

31. Jozef Goetz contribution, 2015 30

32. Jozef Goetz contribution, 2015 31  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 13.5 Form Processing with onfocus and onblur

33. Jozef Goetz contribution, 2015 32 Outline Fig. 13.6 onfocusblur.html (1 of 2) Array of help messages

34. Jozef Goetz contribution, 2015 33 onfocusblur.html (2 of 2) 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 div element where the help message is displayed

35. Jozef Goetz contribution, 2015 34  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 13.6 More Form Processing with onsubmit and onreset

36. Jozef Goetz contribution, 2015 35 Fig.13.7 Onsubmitreset.html (1 of 3)

37. Jozef Goetz contribution, 2015 36 Onsubmit reset.html (2 of 3) Creates an anonymous function (with no name after “function”) to register as an event handler for the onsubmit and onreset event. Uses confirm method of the window object to return a boolean stating whether or not the form should be submitted or reset. If the user click OK, confirm returns true and the corresponding action will take place, otherwise if the user click Cancel no action will take place.

38. Jozef Goetz contribution, 2015 37 Outline Onsubmitreset.html (3 of 3)

39. Jozef Goetz contribution, 2015 38 13.5 Form Processing with onfocus and onblur

40. Jozef Goetz contribution, 2015 39  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 13.7 Event Bubbling

41. Jozef Goetz contribution, 2015 40 Outline Fig.13_0bubbling.html (1 of 3) e. ancelBublle property cancels = false, so the bubbling of the event in the child element’s event handling code. So it will bubble up to the document – see function documentClick()

42. Jozef Goetz contribution, 2015 41 bubbling.html (2 of 3) Cancels event bubbling, So it will not bubble up to the document Registers events for clicking in the two p elements, which are children of the document object Registers an event for the document object. It trigers when the onclick even bubles up to the document Common Programming Error 13.5 Forgetting to cancel event bubbling when necessary may cause unexpected results in your scripts.

43. Jozef Goetz contribution, 2015 42 13.7 Event Bubbling

44. Jozef Goetz contribution, 2015 43  The following slide contains a list of some events supported by both Firefox and Internet Explorer 13.8 More Events Fig. 13.13 | Cross-browser events. (Part 1 of 2.)

45. Jozef Goetz contribution, 2015 44 Fig. 13.13 | Cross-browser events. (Part 1 of 2.)

46. Jozef Goetz contribution, 2015 45 13.8 More Events  The actual DOM event names begin with " on ", but we show the names you use with addEventListener here.