Javascript
JavaScript Events
Events are actions performed via JavaScript. They are defined in
the HTML tags. An event is generally associated to a function that
will be executed the time this event occurs. Here are some examples:
1. onload
1. onload: triggered when entering the page.
Example:
<html>
<head>
<script type="text/javascript">
function ShowUpPicture()
{
... code to show pictures
}
</script>
</head>
<body onload="ShowUpPicture()">
</body>
</html>
2. onclick
The event onclick: occurs when an object is double-clicked.
Example:
<html>
<body>
First field: <input type="text" id="field1" value="Regards .. ">
<br />
Second field: <input type="text" id="field2">
<br /><br />
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>
Double-clicking the button, copies the content of First field to
Second field.
3. onchange:
The onchange event occurs when the content of a field changes.
<html>
<head>
<script type="text/javascript">
function the_length(x)
{
var y = document.getElementById(x).value;
document.getElementById(x).value = y.length;
}
</script>
</head>
<body>
Enter some characters:
<input type="txt" id="word" onchange="the_length(this.id)">
</body>
</html>
Click outside the box to see the length of the taped set
of characters.
4. onmouseover:
The onmouseover event occurs when the mouse pointer
moves over a specified object.
Example:
<body>
<h3>Changing images</h3>
<a href="noscript.html"
onMouseOver="document.ThePicture.src='images/cat.jpg'"
onMouseOut="document.ThePicture.src='images/corto.gif'"
onClick="return false;">
<img src="images/corto.gif" name="ThePicture" alt="changing pictures" border="0">
</a>
</body>
Changing images
5. onSubmit
The onSubmit event is used to validate form fields before
submitting it.
Example:
<html>
<head>
<script type="text/javascript">
function verify (x)
{
the_form.word.value
var y = the_form.word.value ;
if (y % 2 !=0 ){
alert (" Enter an even nuumber .." );
}
}
</script>
</head>
<body>
<i>Enter an even number:</i> <br />
<form name="the_form" action="examples.html" onSubmit="verify(this.name)">
<input type="txt" name="word" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
If the field values the function verif() return true and the form is
submitted, otherwise the function returns false, and th form is cancelled.
6. onfocus
The onfocus event occurs when an object gets concerned.
In the following example, on focus, the color of the entered
character becomes red.
<html>
<head>
<script type="text/javascript">
function red(x)
{
document.getElementById(x).style.color="red";
}
</script>
</head>
<body>
<b>Enter a character. On focus, its color becomes red.</b>
<br>
<input type="text" onfocus="red(this.id)" id="word">
</body>
</html>
7. other example: setInterval
<script type="text/javascript">
var nbSeconds=0;
var timeID;
function add() {
nbSeconds++;
document.this_form.times.value=nbSeconds;
}
function send() {
document.this_form.nbSeconds.value=nbSeconds;
document.this_form.submit();
}
</script>
<em>Incremente by "mouseover". Clicking reloads this page.</em>
<a href="javascript:send()"
onMouseOver="timeID=setInterval('add()', 1000)"
onMouseOut="clearInterval(timeID)">
<img src="images/check.jpg" name="check" alt="check" border="0">
</a>
<form name="this_form" method="post" action="Post1.php">
<input type="text" name="times" value="0">
<input type="hidden" name="nbSeconds" value="0">
</form>
Incremente by "mouseover". Clicking reloads this page.
|