1. Event Handlers CS101 Introduction to Computing

2. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where events can be handled on a page Find out what the events are in JavaScript Determine the event handlers that are used for each event Be able to code scripts that make use of event handlers

3. What is an Event? Something that happens when the User of the page performs some sort of action Possible actions –Mouse click –Mouse over An action triggers an event

4. What Is an Event Handler? Predefined JavaScript keyword Handles an event on a Web page –Identifies an event and then performs a specific task or set of tasks

5. Why Event Handlers Are Useful Enables Web page to react to an action by the User thus making scripts that are interactive and fun to use Example –Sending an alert to the User when he/she moves mouse over a link

6. Event Handler Locations and Uses …

7. Event Handler Locations Mostly used in –Form elements –Links –Body

8. Using Event Handlers Need to know keywords for event handlers and where to place event handler in script OnClick event handler –Used to make something happen when the User clicks something on the document

9. Problem 1 Display an alert message when the user clicks a button

10. Add the onClick event handler as an attribute to a form button Difference between and event handler attribute and HTML attribute –We can add JavaScript code inside an event handler attribute rather than just an attribute value Notice the quote marks –Double for code –Single for message (to avoid confusion with code)

15. Problem 2 Display alert messages when the user clicks a button

16. We can perform multiple actions on the script event We can code in two alerts and execute multiple commands Keep on one line between event handler keyword and semicolon –Line break could cause an error

17. <input type="button" onClick="window.alert('Hi');window.alert('Bye');">

21. <input type="button" onClick="window.alert('Hi');window.alert('Bye');">

22. Problem 3 Display alert messages when the user clicks a button using a function

23. If code is long, use a function Define function in head Call function from body This shortens code within event handler Can also reuse function elsewhere in a button or script

24. Events & Functions <!-- function hi_and_bye() { window.alert('Hi'); window.alert('Bye'); } //-->

28. Events & Functions <!-- function hi_and_bye() { window.alert('Hi'); window.alert('Bye'); } //-->

29. The Event Handlers Event Event handler Event trigger –Action that triggers event

30. EventEvent HandlerEvent Trigger ClickonClickUser clicks an area MouseoveronMouseOverUser moves the mouse over link MouseoutonMouseOutUser moves the mouse away from link LoadonLoadWeb page finishes loading UnloadonUnloadUser leaves current page FocusonFocusUser gives focus to something BluronBlurUser removes focus from something ChangeonChangeUser changes contents of form element SubmitonSubmitUser submits form on page

31. The Click Event (onClick) User clicks on an area Mainly used in form elements and links

32. Problem 4 Display an alert message when the user clicks on a button

33. onClick Event Handler <input type="button" value="Do not click here" onClick="window.alert('I told you not to click me!');">

36. Problem 5 Display an alert message when the user clicks on a link

37. onClick Event Handler Don't click me

40. The Mouseover Event (onMouseOver) User moves the mouse over an area Used in –Text link –Linked image

41. Problem 6 Display an alert message when the user moves mouse over a link

42. onMouseOver Event Handler Don't try clicking me!

44. The Mouseout Event (onMouseOut) User moves the mouse out of an area

45. Problem 7 Display an alert message when the user moves mouse away from a link

46. onMouseOut Event Handler Click me!

48. The Load Event (onLoad) Web page finishes loading

49. Problem 8 Display an alert message when the Web page finishes loading

50. onLoad Event Handler Body text.

53. The Unload Event (onUnload) Web page finishes loading

54. Problem 9 User leaves page

55. onUnload Event Handler Body text.

58. The Focus Event (onFocus) User gives focus to something

59. Problem 10 User gives focus to a text box

60. onFocus Event Handler Enter your name:

63. The Blur Event (onBlur) User removes focus from something

64. Problem 11 User gives focus to a first text box User removes focus from first text box User gives focus to second text box

65. onBlur Event Handler Give this text box focus: Then give this box focus to blur the first one:

68. What We Learnt Today... Learnt about event handlers Determined how events are useful in JavaScript Discovered where events can be handled on a page Found out what the events are in JavaScript Determined the event handlers that are used for each event Coded scripts that made use of event handlers