JAVASCRIPT EVENTS
JavaScript supports different types of events such (OnClick, OnLoad, OnMousemove, OnMouseOver, OnChange, etc.) and these events can be assign with different types of task or user define functions.
OnClick: This event associated with single left click, the following will illustrate it.
<html>
<title> A simple onlick example </title>
<body>
<form>
<input type="button" value="Click me" onclick="msg()">
</form>
<script>
function msg()
{
alert("onclick event work");
}
</script>
</body>
</html>
OnMouseOver: This event trigger when mouse cursor move over on its related object.
OnMouseOut: This event trigger when mouse cursor out from its related object.
OnMouseOver and OnMouseOut Event Example
<html>
<title> A simple example of OnMouseOver and OnMouseOut </title>
<body>
<form name=f>
<input type="button" value="Click me" name=b onmouseover="fun1()" onmouseout="fun2()">
</form>
<script>
function fun1()
{
f.b.value="Hello...";
}
function fun2()
{
f.b.value="Bye...";
}
</script>
</body>
</html>
OnChange: This event related with select bar control and trigger as an user change select bar vlaue.
Example of OnChange Event
<title> Program to change background color </title>
<body>
<form name="f">
<select name="c" onchange="color()">
<option> Red </option>
<option> Lime </option>
<option> Yellow </option>
<option> Pink </option>
<option> Blue </option>
<option> Brown </option>
</select>
<script>
function color()
{
document.bgColor=f.c.value;
}
</script>
</body>
</form>
OnKeyPress: This event related with textbox control and trigger as an user press any key.
Example of OnKeyPress Event
<html>
<title> A </title>
<form name=f>
Enter any color name: <input type="text" name="c" onKeyPress="color()">
</form>
<script>
function color()
{
document.bgColor=f.c.value;
}
</script>
</html>
OnLoad: This event concern with <body> tag and execute as document loaded.
Example of OnLoad Event
<html><title> An example of OnLoad Event </title>
<body onLoad="color()">
<form name="f">
<select name="c" onchange="color()">
<option> Red </option>
<option> Lime </option>
<option> Yellow </option>
<option> Pink </option>
<option> Blue </option>
<option> Brown </option>
</select>
<script>
function color()
{
document.bgColor=f.c.value;
}
</script>
</body>
</form>
0 Comments