Event Handlers CS101 Introduction to Computing

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

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

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

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

Event Handler Locations and Uses …

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

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

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

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)

Problem 2 Display alert messages when the user clicks a button

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

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

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

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

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

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

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

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

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

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

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

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

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

onClick Event Handler Don't click me

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

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

onMouseOver Event Handler Don't try clicking me!

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

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

onMouseOut Event Handler Click me!

The Load Event (onLoad) Web page finishes loading

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

onLoad Event Handler Body text.

The Unload Event (onUnload) Web page finishes loading

Problem 9 User leaves page

onUnload Event Handler Body text.

The Focus Event (onFocus) User gives focus to something

Problem 10 User gives focus to a text box

onFocus Event Handler Enter your name:

The Blur Event (onBlur) User removes focus from something

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

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

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