"Event
handlers" in JavaScript
What are
Event handlers?
They are JavaScript code that
are not added inside the <script> tags, but rather, inside the html
tags, that execute JavaScript when something happens, such as pressing
a button, moving your mouse over a link, submitting a form etc.
Introduction
What are
event handlers?
They are JavaScript code that are
not added inside the <script> tags, but rather, inside the html tags,
that execute JavaScript when something happens, such as pressing a button,
moving your mouse over a link, submitting a form etc.
The basic syntax of these event handlers
is:
name_of_handler="JavaScript code"
Example:
onClick="alert('Hello,
world!')"
Event
Handlers:
onclick
- Use this to invoke JavaScript upon clicking (a link, or form boxes)
onload
- Use this to invoke JavaScript after the page or an image
has finished loading.
onmouseover
- Use this to invoke JavaScript if the mouse passes by some link
onmouseout
- Use this to invoke JavaScript if the mouse goes pass some link
onunload
- Use this to invoke JavaScript right after someone leaves this page.
OnClick
Event handlers
onClick
handlers execute something only when users
click on form
buttons, check boxes, etc, or text
links,
therefore they
can only be inserted in these tags,
for example, <a>,<input
type=..>.
Example:
<script>
function
test()
{
alert("You
have activated me by clicking the grey button! Note that the event
handler is added within the event that it handles, in this case, the form
button event tag")
}
</script>
<form>
<input
type="button"
name="test1" value="Click here" onclick="test()">
</form>
The function test() is invoked
when the user clicks the button.
You can use this tags to change
the background color of a document interactively:
<form name="go">
<input
type="checkbox" name="C1" onclick="document.bgColor='lightblue'">
<input
type="checkbox" name="C2" onclick="document.bgColor='lightyellow'">
<input
type="checkbox" name="C3" onclick="document.bgColor='lightgreen'">
</form>
These tags will be included in the
next example.
Example
<html>
<head>
<title> event_handler</title>
</head>
<body>
<script>
function Hi()
{
alert("Hi there!")
}
</script>
<form>
<input type="button" name="hi" value="Click me!" onclick="Hi()">
</form>
<form>
You
can change color of the screen in LIGHTBLUEby
using this checkbox:
<input type="checkbox" name="click"
onclick="document.bgColor='lightblue'">
<br>
<input type="button" onclick="document.bgColor='white'"
value="Again WHITE?">
<input type="button" onClick="window.document.bgColor='yellow'"
value="YELLOW
color of the screen?">
</form>
</body>
</html>
OnLoad
Event handlers
The onload event handler is
used to call the execution of JavaScript
after a page/ frameset)/ image
has completely loaded.
It
is added like this:
<body
onload="function()">
// Execution of code
will begin after the page has loaded.
<frameset
onload="function()">
// Execution of code
will begin after the current frame has loaded.
<img
src="whatever.gif" onload="function()">
// Execution of code
will begin after the image has loaded.
Example
<html>
<head>
<title>event_handler</title>
</head>
<body
onload="alert('File Page2.htm has finished loading!')">
This file is opened in a new window!
</body>
</html>
As soon as the page has finished
loading, it will alert you saying so.
Let save the above example
with a name "Page2.htm"
Let you see the second part
of this example about opening the file "Page2.htm"
in a new window.
<html>
<head>
<title>event_handler</title>
</head>
<body>
<form
method="post">
<input type="button" name="b1" value="Click here to see"
onclick="window.open('page2.htm')">
</form>
</body>
</html>
If you want to open the file
2Page.htm in a smaller window,
you must change the form tags
with:
<form>
<p><input type="button" name="b1" value="Click here to see"
onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">
</form>
onMouseover,
onMouseout Event handlers
These handlers are used exclusively
with links. The following example writes something to the status bar (at
the bottom of your screen) whenever a mouse cursor hovers over the link,
and deletes it when the mouse moves away.
<a href="some_file.htm" onmouseover="status='Do
not click here, its empty!';
return true"onmouseout="status=''">Don't
Click Here</a>
the "status" refers to window.status,
which is how you write to the status bar.
Note that instead of calling a
function, we wrote directly the JavaScript code within the handler:
"status='Do not click here, its empty!';return true"
It is important that you separate
statements with ;
. You could have, alternatively, written everything up until "return true"
as a function and then calling it:
function writestatus()
{
status="Do
not click here, its empty!"
}
and then:
onmouseover="writestatus();return
true"
You need this to "activate" the
status onmouseover effect!
onmouseout="status='
'" clears the status after the mouse leaves the link.
Whenever the mouse moves away from
the link, the status bar is "reset" again.
If you don't insert this code,
the status bar will still have those words you entered into it even after
taking away the cursor.
Whenever we have nested quotations,
the inner ones are always singled. Ie:
onclick="document.write('hello')"
All this is collected in the next
Example:
<html>
<head>
<title>event_handler</title>
</head>
<body>
<script>
function writestatus()
{
status="Do not click here, it's empty file!"
}
</script>
<a href="empty_file.htm"
onmouseover="writestatus();return true"
onmouseout="status=''">Don't Click Here</a>
</body>
</html>
|