What are events?
Events allow you to write JavaScript code that reacts
to certain situations. Examples of events include:
The user clicking the mouse button
The Web page loading
A form field being changed
Event handlers
An Event Handler executes a segment of a code based
on certain events occurring within the application,
such as onLoad, onClick.
JavaScript Event Handlers can be divided into two
parts:
interactive Event Handlers
non-interactive Event Handlers
An interactive Event Handler is the one that depends
on the user interactivity with the form or the document.
For example, onMouseOver is an interactive Event
Handler because it depends on the users action with the
mouse.
Non-interactive Event Handler would be onLoad,
because this Event Handler would automatically execute
JavaScript code without the user's interactivity.
EVENT HANDLER USED WITH
onAbort image
onBlur select, text, text area
onChange select, text, textarea
onClick button, checkbox, radio, link, reset, submit, area
onError Image, window
onFocus select, text, textarea
onLoad windows, image
onMouseOut link, area
onMouseOver link, area
onSelect text, textarea
onSubmit form
onUnload window
onChange:
The onChange Event Handler executes JavaScript code when
input focus exits the field after the user modifies its text.
Example:
<HTML>
<HEAD>
<TITLE>Example of onChange Event Handler</TITLE>
<SCRIPT>
function valid(input) {
alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<FORM>
<INPUT TYPE="text" VALUE="10"
onChange="valid(this.value)">
</FORM>
</BODY>
</HTML>
onClick:
<HTML>
<HEAD>
<TITLE>Example of onClick Event Handler</TITLE>
<SCRIPT>
function valid(form) {
var input = form.data.value;
alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting your name into the text box:<BR>
<FORM>
<INPUT TYPE="text" NAME="data">
<INPUT TYPE="button" VALUE="Click Here"
onClick="valid(this.form)">
</FORM>
</BODY>
</HTML>
-onLoad
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
alert("Hello there...\n\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
onUnload:
An onUnload Event Handler calls JavaScript code when a
document is exited.
Example:
<HTML>
<HEAD><TITLE>onUnLoad Example</TITLE>
<SCRIPT>
function goodbye() {
alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye();">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
onSubmit
An onSubmit Event Handler calls JavaScript code when the form is
submitted.
Example:
<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE></HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<BR>
<FORM NAME="myform" onSubmit="alert('Thank you ' +
myform.data.value +'!')">
<INPUT TYPE="text" NAME="data">
<INPUT TYPE="submit" VALUE="Submit this form">
</FORM>
</BODY>
<HTML>
onBlur:
An onBlur Event Handler executes JavaScript code when input
focus leaves the field of a text, textarea, or a select option.
For windows, frames and framesets the Event Handler executes
JavaScript code when the window loses focus.
In windows you need to specify the Event Handler in the
<BODY> attribute.
For example:
<BODY BGCOLOR='#ffffff'
onBlur="document.bgcolor='#000000'">
Note: On a Windows platform, the onBlur event does not work
with <FRAMESET>.
Example:
<HTML>
<HEAD>
<TITLE>Example of onBlur Event Handler</TITLE>
<SCRIPT>
function validate(value)
{ if (value < 0) alert("Please input a value that is greater or equal to 0");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onBlur Event Handler</H3>
Try inputting a value less than zero:<BR>
<FORM>
<INPUT TYPE="text" onBlur="validate(this.value)">
</FORM>
</BODY>
</HTML>
OnMouseover and
onmouseout
<html>
<head>
<script type="text/javascript">
function over() {
alert("Mouse Over");
}
function out() {
alert("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
