Events will
trigger the function in different cases JS supports five types of events
1. Body events
This events will generated
by body tag.
<html>
<head>
<script
language="javascript">
function
test1(){
var
arr=new
Array('red','blue','green','yellow','cyan','black','pink','grey','orange');
var
i= Math.round(Math.random()*10);
document.getElementsByTagName("body")[0].style.backgroundColor=arr[i];
}
function
test2(){
alert("page
closing");
}
</script>
</head>
<body onload='test1()'
onbeforeunload='test2()'>
</body>
</html>
2. Key Board Event
This event will generated
by key board
<html>
<head>
<script
language="javascript">
function
test1(elt){ document.getElementById("x").value=elt.value.toUpperCase();
}
</script>
</head>
<body>
<input
type='text' id='x' onkeydown="test1(this)"/>
</body>
</html>
3. Mouse Events
This events will generated
by mouse
<html>
<head>
<script
language="javascript">
function
test1(id){
var
img=document.getElementsByTagName("img");
for(i=0;i<img.length;i++){
img[i].height='100';
img[i].width='100';
}
document.getElementById(id).height='300';
document.getElementById(id).width='300';
}
</script>
</head>
<body>
<img
src='1.jpg' height='100px' width='100px' id='a'
onclick="test1(this.id)">
<img
src='2.jpg' height='100px' width='100px' id='b'
onclick="test1(this.id)">
<img
src='3.jpg' height='100px' width='100px' id='c'
onclick="test1(this.id)">
<img src='4.jpg'
height='100px' width='100px' id='d' onclick="test1(this.id)">
<img
src='5.jpg' height='100px' width='100px' id='e'
onclick="test1(this.id)">
</body>
</html>
4. Normal Events
5. Form Events
<html>
<head>
<script
language="javascript">
function
test1(){
if(document.testform.name.value
== ""){
alert("Invalid
name");
return
false;
}
document.testform.submit();
}
</script>
</head>
<body>
<form
name='testform'>
<input
type='text' name='name'/><br>
<input
type='text' name='email'/><br>
<input
type='text' name='mobile' onblur="test1()"/><br>
</form>
</body>
</html>
No comments:
Post a Comment