Ø onClick
· The onclick event occurs when an object gets clicked.
Example
<html>
<head>
<script language="javascript">
function test()
{
document.write("Hello world");
}
</script>
</head>
<body>
<input type="button" value="Click Here" onClick="test();" />
</body>
</html>
Ø onDblClick
· The ondblclick event occurs when an object gets double – clicked.
Example
<html>
<head>
<script language="javascript">
function test()
{
document.write("Hello world");
}
</script>
</head>
<body>
<input type="button" value="click here" onDblClick="test();" />
</body>
</html>
Ø onBlur
· The onblur event occurs when an object loses focus.
Example
<html>
<head>
<script language="javascript">
function test()
{
alert("Enter Only Character");
}
</script>
</head>
<body>
<center>
<form>
<table cellpadding="0" cellspacing="5">
<tr>
<th colspan="2"><b>Login Form</th>
</tr>
<tr>
<td><label>Name :</label></td>
<td><input type="text" name="text1" onBlur="test();" /></td>
</tr>
<tr>
<td><label>Passsword :</label></td>
<td><input type="password" name="pass" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Ø onfocus
· The onfocus event occurs when an object gets focus.
Example
<html>
<head>
<script language="javascript">
function test()
{
document.getElementById("div1").innerHTML = "Maximum 8 character required.";
}
</script>
</head>
<body>
<center>
<table cellpadding="0" cellspacing="5">
<tr>
<th colspan="2"><b>Login Form</th>
</tr>
<tr>
<td><label>Name :</label></td>
<td><input type="text" name="text1" id="text1" /></td>
</tr>
<tr>
<td><label>Passsword :</label></td>
<td><div id="div1"></div><input type="password" name="pass" onFocus="test();" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Login" /></td>
</tr>
</table>
</center>
</body>
</html>
Ø onchange
· The onchange event occur when the content of a field change.
Example
<html>
<head>
<script language="javascript">
function test()
{
var x = document.getElementById("op1").value;
alert(x);
}
</script>
</head>
<body>
<center>
<form>
<table cellpadding="0" cellspacing="5">
<tr>
<td>Country :</td>
<td><select name="op1" id="op1" onChange="test();">
<option value="1" >India
<option value="2">US</option>
</select>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Ø OnKeypress
· The onkeypress event occurs when a keyboard key is pressed or held down.
Note : browser difference : internet explorer uses event.keyCode to retrieve the character that was pressed and netscape/firefox/opera uses event.which.
Example
<html>
<head>
<script language="javascript">
function test(e)
{
if(window.event) // for IE
{
alert(e.keyCode);
}
else if(e.which) //for Firefiox
{
alert(e.which);
}
}
</script>
</head>
<body>
<input type="text" onKeyPress="test(event);" />
</body>
</html>
Ø OnKeydown
· The onkeydown event occurs when a keyboard key Is pressed.
Example
<html>
<head>
<script language="javascript">
function test(e)
{
if(window.event) // for IE
{
alert(e.keyCode);
}
else if(e.which) //for Firefiox
{
alert(e.which);
}
}
</script>
</head>
<body>
<input type="text" onKeyDown="test(event);" />
</body>
</html>
Ø OnKeyup
· The onkeyup event occurs when a keyboard key is released.
Example
<html>
<head>
<script language="javascript">
function test(e)
{
if(window.event) // for IE
{
alert(e.keyCode);
}
else if(e.which) //for Firefiox
{
alert(e.which);
}
}
</script>
</head>
<body>
<input type="text" onKeyUp="test(event);" />
</body>
</html>
Ø Onmousemove
· The onmousemove event occurs when the mouse pointer is moved.
Example
<html>
<head>
<script language="javascript">
function test()
{
alert("hello world")
}
</script>
</head>
<body>
<input type="text" onMouseMove="test();" />
</body>
</html>
Ø Onmouseout
· The onmouseout event occurs when the mouse pointer moves away from a specified object.
Example
<html>
<head>
<script language="javascript">
function test()
{
alert("hello world")
}
</script>
</head>
<body>
<input type="text" onMouseOut="test();" />
</body>
</html>
Ø onsumit
· The onsubmit event occurs when the submit button in a form is clicked.
Example
<html>
<body>
<form onsubmit="alert('Form submit successfully');">
<input type="submit" />
</form>
</body>
</html>
Ø onreset
· The onreset event occurs when the reset button in a form is clicked.
Example
<html>
<body>
<form onReset="alert('Form reset ');">
<input type="reset" />
</form>
</body>
</html>
Ø onselect
· The onselect event occurs when text is selected in a text or Textarea fied.
Example
<html>
<body>
<textarea cols="20" rows="10" onselect="alert('you have selected some text.')" >Hello World</textarea>
</body>
</html>
Ø onload
· The onload event occurs immediately after a page or an image is loaded.
Example
<html>
<body onLoad="alert('page is load');">
Hello World
</body>
</html>
Ø onunload
· The onunload event occurs when a user exits a page.
Example
<html>
<body onUnload="alert('page is unload');">
Hello World
</body>
</html>
Posted By : Hemangi Zala
No comments:
Post a Comment