Javascript

Related applications

Search a word:

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.

First field:
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>

Enter some characters:

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.

Web

ScientificSentence