1. Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Detect mouse events Use events with the tag Apply blur and focus event handlers

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Objectives (continued) Detect keyboard events Utilize form events Apply selection events Advanced use of event handlers

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? Events are an important part of object-oriented programming Keywords that allow us to detect and react to events are called event handlers  Event handlers are occasionally referred to as listeners in advanced programming applications

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Event handlers are almost always used to "bind" HTML and JavaScript code together  Using JavaScript event handlers can be used to trigger actions when certain events are detected  Most practical uses of JavaScript require the detection of a specific event such as: when the user rolls over an image when a user submits a form

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Visual Summary Event handlers are usually used inline with HTML tags The onclick event handler appears to be an HTML attribute of the tag Example Welcome to my site.

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary (continued) Bound tag Method Event handler End method quotes End event handler quotes

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) Event handlers always start with the word on followed by the event  This is typical of most object oriented languages Event handlers aren't case sensitive when used inline in HTML

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) Event handler statements are typically written in one of three ways: Type:Example Methodonclick="alert('hi');" User-Defined Functiononmouseover="myFunction();" Multiple Statements onkeypress="window.open(); x=10;"

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) In object oriented languages, events are tied to particular objects In JavaScript, event handlers are bound to HTML tags or the object that represents the HTML tag Each HTML tag has a list of event handlers which it can detect and to which it can respond

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Detecting Mouse Events Events related to the use of a mouse were among the first event handlers to be added to JavaScript Newer versions of JavaScript contain event handlers to detect such things as the roll of a mouse wheel

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Detecting Mouse Events (continued) OnClick and Ondblclick  The onclick event fires when an object is clicked  The ondblclick event fires when the user double clicks the mouse on an object  The onclick and ondblclick event handlers work on virtually any element that can be displayed on the screen

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Detecting Mouse Events (continued) OnClick and Ondblclick  The onclick event fires when an object is clicked  The ondblclick event fires when the user double clicks the mouse on an object  The onclick and ondblclick event handlers work on virtually any element that can be displayed on the screen

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Detecting Mouse Events (continued) ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER  The onmousedown event fires when the user clicks the mouse on an object  The onmousemove event fires when the mouse moves while over an element

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Detecting Mouse Events (continued)  The onmouseover handler fires when the mouse initially moves over the edge of an element  The onmouseout event fires when the user moves the mouse off of an element <img src="normal version of the image;" onmouseover="switch the normal image with a rollover version;" onmouseout="remove the rollover image and return the original image;" onmousedown="go to the associated URL;">

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Detecting Mouse Events (continued) Use OnClick  The onclick event fires when an object is clicked Example

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Detecting Mouse Events (continued) onclick.html - shows the onclick event handler function eventTest() { alert("The function has been activated"); } This is text in a paragraph tag. this is a link

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Detecting Mouse Events (continued) Detect Double Mouse Clicks  The onclick event fires when an object is double clicked Example

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Detecting Mouse Events (continued) ondblclick.html - shows the ondblclick event handler function eventTest() { alert("The function has been activated"); } This is text in a paragraph tag. this is a link

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Detecting Mouse Events (continued) Detecting Rollovers  The onmouseover event fires when the mouse initially moves over the edge of an element Example

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Detecting Mouse Events (continued) onmouseover.html - shows the onmouseover event handler This page generates an alert box when someone rolls over the image shown below.

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Using Events with the Tag The tag is a display tag which represents every item displayed in the active part of the browser window  Since the tag represents the page that is displayed, event handlers such as onclick or onmouseover can be used with the tag  Despite this ability, onclick or onmouseover rarely have practical applications when used with the

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Using Events with the Tag (continued) Other event handlers can be used with the tag which are much more useful  The onload event handler can be used to trigger events a HTML page has finished loading into the browser

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Using Events with the Tag (continued) onload  The onload handler fires when the last character of the HTML page has loaded  This event is typically used with the or tag but may also be attached to: tag

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Using Events with the Tag (continued) onresize  This handler indicates the page is being resized  This event is typically used with the tag as in the following example  This event handler opens up all kinds of options for Web designers

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Using Events with the Tag (continued) onunload  This event: fires when the browser is leaving the current document in a window or frame fires when the reset button is used, since the refresh button unloads the current document then loads a new version of the file can be used with the or tag  Example Example

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Using Events with the Tag (continued) onunload.html This page uses the onunload event handler.

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Using Events with the Tag (continued) Using Onresize  This handler indicates the page is being resized  This event is typically used with the tag as in the following example  Example of resizing the current document to a resolution of 640*480, approximately one second after the function is invoked Example of resizing the current document to a resolution of 640*480, approximately one second after the function is invoked

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Using Events with the Tag (continued) At this point, nothing will happen since the function setsize() exists in the document but isn't been invoked anywhere in the code Next

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Using Events with the Tag (continued) After you resize the window, the window should resize itself to a resolution of 640*480, approximately one second after you resize it

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Using Events with the Tag (continued) Correct Event Detection Issues  If you will try to use self.resizeTo() without setTimeout() method, you may notice a "jerky" effect as the window constantly resizes as you try to resize it because the event is constantly being detected and acted upon  Example of resizing the current document to a resolution of 640*480, without the setTimeout() method Example of resizing the current document to a resolution of 640*480, without the setTimeout() method

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Using Events with the Tag (continued) You may notice a "jerky" effect as the window constantly resizes as you try to resize it

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Applying Blur and Focus Event Handlers The focus() and blur() methods can also be used with form elements The user can also create these events by choosing an object with the mouse

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Applying Blur and Focus Event Handlers (continued) If a window or frame has focus, it means that any keystrokes we type will be directed to that window We can give focus to windows in a number of ways such as:  clicking in or on the window  using the focus() method

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Applying Blur and Focus Event Handlers (continued) The onblur event fires when focus is given to another window  The onblur event can be used with the following tags:

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Applying Blur and Focus Event Handlers (continued) The onfocus event fires when the user chooses the specified window  The onfocus event can be used with the following tags:,

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Applying Blur and Focus Event Handlers (continued) If we open this page in the browser and choose another window, the event fires and the alert box appears

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Applying Blur and Focus Event Handlers (continued) Detecting the Blur of a Window Object  The onblur and onfocus events can be used effectively to stop actions in a window  Example Example

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Applying Blur and Focus Event Handlers (continued) onfocuselement.html Comments: <textarea name="comments" id="comments" tabindex="1" onblur="if (this.value=='') { alert('Please Enter a Comment');}" > Your name: document.form1.comments.focus();

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Detecting Keyboard Events Keyboard events refer to a group of events related keys being pressed on the keyboard Keyboard events usually fire when the user either presses or releases a key Keyboard event handlers offer the opportunity to create usable experiences for disabled users who may have difficulty using a mouse

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Detecting Keyboard Events (continued) ONKEYDOWN, ONKEYPRESS, ONKEYUP  The onkeydown event fires if a key is pressed while the element has focus  The event fires: as soon as the user presses the key and the key doesn't have to be released no matter which key is pressed

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Detecting Keyboard Events (continued)  The onkeypress event fires if a key is pressed and then released while the element has focus The event:  doesn't fire until the key is released  fires no matter which key is pressed

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Detecting Keyboard Events (continued)  The onkeyup event fires when a key is released when the element has focus the event doesn't fire until the key is released

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Detecting Keyboard Events (continued) Detect a Keypress onkeypress.html - shows the onkeypress event handler Press a key while the link below is active and you will generate an alert box. Welcome to my site.

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Use Form Related Events Forms offer very practical uses for various event Various techniques can be accomplished by detecting whether forms have been submitted or reset

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Use Form Related Events (continued) onsubmit  The onsubmit handler indicates that a form is being submitted, usually by the press of a submit button  This event is usually bound to the tag Example

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Use Form Related Events (continued) Name: <input type="submit" name="Submit" value="Submit"> <input type="reset" name="Reset“ value="Reset"> The code shown will create an alert box when the submit button is chosen

48. Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Use Form Related Events (continued) onreset  The onreset handler indicates that a form is being reset, usually by the press of a reset button  This event is usually bound to the tag Example

49. Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Use Form Related Events (continued) Name: The shown code will create an alert box when the reset button is chosen

50. Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Use Form Related Events (continued) Use the OnSubmit Event Handler  The onsubmit event handler can be used to detect when the user is ready to submit the contents of the form  Example Example

51. Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Use Form Related Events (continued) onsubmit.html - generates an alert when the form is submitted function formCheck() { alert("You entered "+document.form1.name.value);} Name: A function has been provided in the head of the document. This function will return any value entered into the form field

52. Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Use a Selection Event Event handlers exist which allow the developer to determine if text has been selected or changed These handlers are usually used within form elements for a variety of reasons

53. Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Use a Selection Event (continued) ONSELECT  This event fires when the user selects text in a form element by highlighting the text  It is available with the and tags Example

54. Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Use a Selection Event (continued)

55. Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Use a Selection Event (continued) onchange  The onchange event handler fires when the user modifies the value or content of an HTML element in a form: Select Input Text area then releases the mouse button  This handler is often used to check or confirm changes made the user

56. Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Use a Selection Event (continued) This will generate an alert box when the text is selected

57. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Use a Selection Event (continued) Detect the Change of a Form Element  The ability to use the onchange event handler gives developers the ability to know if form elements have changed  This allows forms to be designed to help with complicated procedures

58. Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Use a Selection Event (continued) If you choose the Tab key to blur the input text box or click somewhere else to blur the text box the alert window appears

59. Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Advanced Use of Event Handlers You can also use event handlers outside of HTML tags by incorporating them directly into scripts You can also write code to manually fire many events in JavaScript without the event actually occurring Examples

60. Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Advanced Use of Event Handlers (continued) When the first HTML tag is pressed the text box the alert window appears Next

61. Copyright (c) 2004 Prentice-Hall. All rights reserved. 61 Advanced Use of Event Handlers (continued) Adding this line of code will cause the event to fire manually, even though the user hasn't clicked on the link

62. Copyright (c) 2004 Prentice-Hall. All rights reserved. 62 Advanced Use of Event Handlers (continued) Returning Information from an Event Handler  When you use the event handler as a method, you basically set the value of the condition to true, which allows JavaScript to execute the associated code  You can also set the event to false this has the effect of keeping the associated code from executing, even though the event has occurred Example

63. Copyright (c) 2004 Prentice-Hall. All rights reserved. 63 Advanced Use of Event Handlers (continued) The user must choose OK to return a true value and complete the form submission. If the user chooses Cancel, the return value is false, which effectively cancels the submit action Name:

64. Copyright (c) 2004 Prentice-Hall. All rights reserved. 64 Advanced Use of Event Handlers (continued) Create an Event Handler Using Dot Syntax Example

65. Copyright (c) 2004 Prentice-Hall. All rights reserved. 65 Advanced Use of Event Handlers (continued) When you move your mouse over the image the text box the alert window appears jsevent.html This file shows how to create an event handler in JavaScript. window.document.images[0].onmouseover =new Function("alert(You moved your mouse pointer over the image')");