Lesson 9_2 Event Handlers - Aland Russell

berserkarithmeticInternet and Web Development

Dec 14, 2013 (3 years and 7 months ago)

126 views

Lesson 9.2
Page 1 of 3
Web Design
Lesson 9.2
Events

We said in the earlier units of JavaScript that it was developed so that the pages would react to the user’s
input. This is usually done with events. Events are actions that the user performs and JavaScript responds to
that action. For example, a user clicks on an object is an event known as onclick. There are events however
that are not user-generated, for example, when the page loads, JavaScript can respond with an action. Here
is a list of common events that we script responses to:
Event

Event Handler

JavaScript reacts when

abort

onabort

The loading of an image is interrupted

blur

onblur

An element, such as a check box, becomes inactive

click

onclick

The user clicks once

dblclick

ondblclick

The user double clicks

ch
ange

onchange

The value of an element, for example a text box, changes

error

onerror

An error occurs when a document or image is being loaded

focus

onfocus

An element, for example a button, becomes active

load

onload

A document or image loads

mouseout

onmouseout

The mouse or cursor moves off an element such as an image

mouseover

onmouseover

The mouse or cursor moves over an object such as an image

mousedown

onmousedown

The user presses the mouse button

mouseup

onmouseup

The user releases the mouse bu
tton

mousemove

onmousemove

The user moves the mouse

reset

onreset

A form’s fields are reset to its default values

select

onselect

The user selects a field in a form

submit

onsubmit

The user submits a form

unload

onunload

A

document unloads

keypress

o
nkeypress

The user presses
or holds down a key

keydown

onkeydown

The user presses a key

keyup

onkeyup

The user releases a key


Events are associated with XHTML elements or tags. For example, onclick can be used inside the <img>
tag. The correct syntax for using and event handler is this:
<element event_handler=”JavaScript code”>
<img onclick=”calculateCustomerTotal(arguments)”> <!This code calls a function when the
image is clicked upon>

This table references which event handlers can be used with which XHTML elements
XHTML
Element

Event Handlers

<a> anchor

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<img> image

onclick, ondblclick, onmousedown, onmouseup, onmouseo
ver, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup

<body>

onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<form>

onsubmit, onreset, onclick, ondblclick, onmouse
down, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Lesson 9.2
Page 2 of 3
<input>

onfocus, onblur, onselect, onchange, onfocus, onblur, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

<textarea>

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<select>

onfocus, onblur, onchange



Assignment:
Enter this code into a document. Debug and test.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<! transitional type needed to use name element of form>

<html>
<head><title>Calculator</title>

<script type="text/javascript">
var inputString=" ";
function updateString(value)
{
inputString += value;
document.Calculator.Input.value= inputString; //writes the value into the input object of
//the calculator form
}
</script>
</head>

<body>
<form name="Calculator" action=""">
<input type="text" name="Input" /><br />
<input type="button" name="plus" value=" + " onclick="updateString(' + ')" />

<!the onclick event runs the function updateString >

<input type="button" name="minus" value=" - " onclick="updateString(' - ')" />
<input type="button" name="times" value=" * " onclick="updateString(' * ')" />
<input type="button" name="div" value=" / " onclick="updateString(' / ')" />
<input type="button" name="mod" value=" % " onclick="updateString(' % ')" /><br />

<input type="button" name="one" value=" 1 " onclick="updateString('1')" />
<input type="button" name="two" value=" 2 " onclick="updateString('2')" />
<input type="button" name="three" value=" 3 " onclick="updateString('3')" />
<input type="button" name="four" value=" 4 " onclick="updateString('4')" />
<input type="button" name="five" value=" 5 " onclick="updateString('5')" /><br />
<input type="button" name="six" value=" 6 " onclick="updateString('6')" />
<input type="button" name="seven" value=" 7 " onclick="updateString('7')" />
Lesson 9.2
Page 3 of 3
<input type="button" name="eight" value=" 8 " onclick="updateString('8')" />
<input type="button" name="nine" value=" 9 " onclick="updateString('9')" />
<input type="button" name="zero" value=" 0 " onclick="updateString('0')" /><br />

<input type="button" name="point" value=" . " onclick="updateString('.')" />
<input type="button" name="clear" value=" clear "
onclick="document.Calculator.Input.value=' '; inputString=' '" />
<input type="button" name="calc" value=" = "
onclick="document.Calculator.Input.value=eval(inputString); inputString=' '" /><br />

<input type="button" name="donot" value=" Don't click here!"
onclick="alert('I told you not to click this button')">
</form>

</body>
</html>


Calculator program is running correctly: _____ 14 pts _____