|
25 Event handlers
Event handlers
-
are code that is called when an event occurs
-
are placed
in
HTML tag pair just like attributes
-
not all tags support all events (see list below)
-
can be one or more JavaScript statements, sepearated by semicolons
-
long
statements can be broken across several lines
Syntax
for
an event handler is
:
<
tag attribute attribute onEventName
=
"javascript code;"
>
-
Notice the semicolon
-
You can have multiple event handlers inside an HTML tag (one
for
each event you wish to respond to)
-
code can call other JavaScript functions
-
'this'
keyword refers to the object
in
which the attirbute is contained
Other Examples
:
<
a href
=
"#"
onClick
=
"alert('Hello');"
>
Click
</
a
><
br
>
//1 event handler in a tag
<
a href
=
"#"
onClick
=
"alert('Hello');"
onMouseOver
=
"alert('Hello');"
>
Click
</
a
><
br
>
//multiple event handlers in a tag
<
a href
=
"#"
onClick
=
"Update()"
>
Click
</
a
><
br
>
// redirect to function Update()
document.onClick
=
"MyFunction()"
// event handlers are properties of that object!
onClick
=
"location:'my.gif'"
// has browser display this image
onClick
=
"location:'
http://www.vbinformation.com
'"
// sends browser to the new URL
<
a href
=
""
onMouseOver
=
"popupFunc();"
>
<
input type
=
"button"
value
=
"Click Me!"
onClick
=
"MyFunction()"
<
input type
=
"button"
value
=
"Click Me!"
onClick
=
"alert('Hi')"
<
input type
=
"button"
value
=
"Click Me!"
onClick
=
"prompt('I need data!')"
<
input type
=
"text"
name
=
"first_text"
onFocus
=
"writeIt('focus'); onBlur="
writeIt(
'blur'
);
" onChange="
writeIt(
'change'
);
">
Description of event handlers
---------------------------------------------
onClick
-
click on form element or link
onChange
-
change value of text, textarea, or select element
onFocus
-
form element gets input focus
onBlur
-
form element loses input focus
onMouseOver
-
mouse over a link or anchor
onMouseOut
-
mouse leaves link or anchor
onSelect
-
user selects form element
's input field
onSubmit
-
submit a form
onResize
-
browser window is resized
onLoad
-
window loads
onUnload
-
window unloads
Events and the Elements That Support Them
-------------------------------------------------------------------------------
abort img
blur body, frameset, all form objects (except hidden)
change input, select, textarea
click most tags
dblclick most tags
error img
focus body, frameset, all form objects (except hidden)
keydown most tags
keypress most tags
keyup most tagsg
load body, frameset
mousedown most tags
mousemove most tags
mouseout most tags
mouseover most tags
mouseup most tags
reset form
select input, textarea
submit form
unload body, frameset
|
