Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine...

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

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

<html><head><title>Events & Functions</title><script language="JavaScript"></script></head><body><form><input type="button" onClick="hi_and_bye();"></form></body></html>

The Event Handlers

• Event

• Event handler

• Event trigger– Action that triggers event

Event Event Handler Event Trigger

Click onClick User clicks an area

Mouseover onMouseOver User moves the mouse over link

Mouseout onMouseOut User moves the mouse away from link

Load onLoad Web page finishes loading

Unload onUnload User leaves current page

Focus onFocus User gives focus to something

Blur onBlur User removes focus from something

Change onChange User changes contents of form element

Submit onSubmit User 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

<html><head><title>onClick Event Handler</title></head><body><form><input type="button" value="Do not click here"

onClick="window.alert('I told you not to click me!');"></form></body></html>

Problem 5

• Display an alert message when the user clicks on a link

<html><head><title>onClick Event Handler</title></head><body><a href="#" onClick="window.alert('Hey! You clicked me!');">Don't click me</a></body></html>

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

<html><head><title>onMouseOver Event Handler</title></head><body><a href="#" onMouseOver="window.alert('I told you not to try and click me!);">Don't try clicking me!</a></body></html>

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

<html><head><title>onMouseOut Event Handler</title></head><body><a href="#" onMouseOut="window.alert('You did not click me!);">Click me!</a></body></html>

The Load Event (onLoad)

• Web page finishes loading

Problem 8

• Display an alert message when the Web page finishes loading

<html><head><title>onLoad Event Handler</title></head><body onLoad="window.alert('The page has finished loading.');">Body text.</body></html>

The Unload Event (onUnload)

• Web page finishes loading

Problem 9

• User leaves page

<html><head><title>onUnload Event Handler</title></head><body onUnload="window.alert('Come back soon.');">Body text.</body></html>

The Focus Event (onFocus)

• User gives focus to something

Problem 10

• User gives focus to a text box

<html><head><title>onFocus Event Handler</title></head><body><form>Enter your name: <input onFocus="window.alert('Capitalize your name.');"></form></body></html>

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

<html><head><title>onBlur Event Handler</title></head><body><form>Give this text box focus: <input type="text" onBlur="window.alert('Hey! Come back!');"><br>Then give this box focus to blur the first one:<input type="text"></form></body></html>

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

Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine...

Documents

Transcript of Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine...