What is Event?
If we perform any action on the HTML element then the event will be raised.
for example, if we click on Button then click is the event for Button.
.......................................................................................................................................
Javascript provides multiple sets of events according to HTML elements:-
EVENT LIST OF JAVASCRIPT:-
1 onload :- when the page will start to load then onload event method will be called.
Example of Onlod:-
Create Script to change page background when the page will be loaded?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun()
{
document.getElementById("b").style.backgroundColor='cyan';
}
function fun1()
{
alert("GET huge discount in DEVOPS");
}
</script>
</head>
<body id="b" onload="fun();fun1()">
</body>
</html>
2 onclick:-
It is the most important command because it is used to click a button, reset, submit, image, div, hyperlink element and perform an action.
<script>
function display()
{
}
</script>
<input type="button" onclick= "display()" />
Create JAVASCRIPT to change page background according to Button Click, if We click on Red button then Red Color, Green Button then Green Color, Blue button then Blue Color.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun()
{
document.getElementById("b").style.backgroundColor='orange';
}
function fun1()
{
document.getElementById("b").style.backgroundColor="red";
}
function fun2()
{
document.getElementById("b").style.backgroundColor="green";
}
function fun3()
{
document.getElementById("b").style.backgroundColor="blue";
}
</script>
</head>
<body id="b" onload="fun()">
<input type="button" value="Red" onclick="fun1()" />
<br>
<br>
<input type="button" value="Green" onclick="fun2()" />
<br>
<br>
<input type="button" value="Blue" onclick="fun3()" />
</body>
</html>
Create Event For Addition Program?
3 mouseover:-
When we mouse over the button, image or hyperlink then this event will be called.
4 onmouseout:-
when we remove mouse position from a button, image or hyperlink then this will be called.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("img").style.width="300px";
document.getElementById("img").style.height="300px";
}
function fun2()
{
document.getElementById("img").style.width="100px";
document.getElementById("img").style.height="100px";
}
</script>
</head>
<body>
<img src="logo.png" id="img" onmouseover="fun1()" onmouseout="fun2()" width="100" height="100" />
</body>
</html>
Example 2:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun1()
{
//alert("fun1");
document.getElementById("im").src ="img2.png";
}
function fun2()
{
//alert("fun2");
document.getElementById("im").src ="img3.jpg";
}
function fun4()
{
document.getElementById("im").src ="logo.png";
}
</script>
</head>
<body>
<img src="img1.jpg" width="200px" height="250px" onmouseover="fun1()" onmouseout="fun2()" onmousemove="fun3()" onmouseenter="fun4()" id="im" />
<br>
<br>
</body>
</html>
5 onkeyup:-
when we presss any key then first up key will work
6 onkeydown:-
when we relase key button then it will work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function showdata(a)
{
document.getElementById("board").innerHTML=a;
}
function changecolor(a)
{
document.getElementById("board").style.backgroundColor=a;
}
</script>
</head>
<body>
<div id="board" style="background-color: black;color:white;width:300px;height: 200px;border:2px solid red;float:left;" >
</div>
<select onchange="changecolor(this.value)" >
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<br>
<br>
<div style="clear: left"></div>
Type here
<br>
<textarea id="txt" onkeyup="showdata(this.value)" rows="5" cols="20">
</textarea>
</body>
</html>
7 onblur:-
It will be called when the cursor will be removed from textfield.
8 onfocus:-
It will be called when cursor will be assigned into textfield
Example of ONBLUR and ONFOCUS
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun1()
{
document.getElementById("txt1").style.backgroundColor='red';
}
function fun2()
{
document.getElementById("txt2").style.backgroundColor='green';
}
function fun3()
{
document.getElementById("txt1").style.backgroundColor='';
document.getElementById("txt2").style.backgroundColor='';
}
</script>
</head>
<body>
<input type="text" id="txt1" onblur="fun1()" onfocus="fun3()" />
<br>
<br>
<input type="text" id="txt2" onfocus="fun2()" />
</body>
</html>
9 onchange:-
RadioButton CheckBox:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(a)
{
//alert(a);
document.getElementById("res").innerHTML= "Selected Course is "+a;
}
</script>
</head>
<body>
<h1>Select Course</h1>
<input type="radio" name="r1" id="r1" value="C" onchange="fun(this.value)">C
<br>
<input type="radio" name="r1" id="r1" value="CPP" onchange="fun(this.value)">CPP
<br>
<input type="radio" name="r1" id="r1" value="DS" onchange="fun(this.value)">DS
<br>
<span id="res"></span>
</body>
</html>
..................................................................................................................
It is used to manage event operation in ListBox,SelectBox,RadioButton and CheckBox .
CheckBox Complete Code:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun()
{
var s=document.frm.chk;
s1="";
for(i=0;i<s.length;i++)
{
if(s[i].checked)
{
s1=s1+s[i].value;
}
}
document.getElementById("res").innerHTML=s1;
}
</script>
</head>
<body>
<form name="frm">
<input type="checkbox" id="chk[]" name="chk" value="C" onchange="fun()" />C
<br>
<br>
<input type="checkbox" id="chk[]" name="chk" value="CPP" onchange="fun()" />CPP
<br>
<br>
<input type="checkbox" id="chk[]" name="chk" value="DS" onchange="fun()" />DS
<br>
<br>
<span id="res"></span>
</form>
</body>
</html>
....................................................................................................
JavaScript Example for DropDownList and ListBox:-
We can select only single item
<select id="xyz">
<option value="Value Field ">Display Item</option>
</select>
ListBox:-
We can select multiple item's.
<select id="xyz" multiple="true">
<option value="Value Field ">Display Item</option>
</select>
Complete Explanation of DropDownlist,ListBox ,CheckedLIST using JS?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li
{
list-style-type: none;
}
li:hover
{
background-color: gray;
}
</style>
<script>
function fun(a)
{
document.getElementById("res").innerHTML=a;
}
function fun1()
{
course="";
for(i=0;i<document.getElementById("lst[]").length;i++)
{
if(document.getElementById("lst[]")[i].selected)
{
course = course+document.getElementById("lst[]")[i].value+" ";
}
}
document.getElementById("res").innerHTML=course;
}
function fun2()
{
course="";
//console.log(document.frm.chk.length);
for(i=0;i<document.frm.chk.length;i++)
{
if(document.frm.chk[i].checked)
{
course = course+document.frm.chk[i].value+" ";
}
}
document.getElementById("res").innerHTML=course;
}
</script>
</head>
<body>
<select onchange="fun(this.value)">
<option value="C">C</option>
<option value="CPP">CPP</option>
<option value="DS">DS</option>
<option value="JAVA">JAVA</option>
<option value=".NET">.NET</option>
</select>
<br>
<br>
<br>
<select id="lst[]" onchange="fun1()" multiple="true">
<option value="C">C</option>
<option value="CPP">CPP</option>
<option value="DS">DS</option>
<option value="JAVA">JAVA</option>
<option value=".NET">.NET</option>
</select>
<div id="res">
</div>
<form name="frm">
<ul>
<li> <input type="checkbox" name="chk" id="chk[]" value="C" onchange="fun2()">C</li>
<li> <input type="checkbox" name="chk" id="chk[]" value="CPP" onchange="fun2()">CPP</li>
<li> <input type="checkbox" name="chk" id="chk[]" value="DS" onchange="fun2()">DS</li>
<li> <input type="checkbox" name="chk"id="chk[]" value="JAVA" onchange="fun2()">JAVA</li>
<li> <input type="checkbox" name="chk" id="chk[]" value=".NET" onchange="fun2()">.NET</li>
</ul>
</form>
</body>
</html>
If we perform any action on the HTML element then the event will be raised.
for example, if we click on Button then click is the event for Button.
.......................................................................................................................................
Javascript provides multiple sets of events according to HTML elements:-
EVENT LIST OF JAVASCRIPT:-
1 onload :- when the page will start to load then onload event method will be called.
Example of Onlod:-
Create Script to change page background when the page will be loaded?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun()
{
document.getElementById("b").style.backgroundColor='cyan';
}
function fun1()
{
alert("GET huge discount in DEVOPS");
}
</script>
</head>
<body id="b" onload="fun();fun1()">
</body>
</html>
2 onclick:-
It is the most important command because it is used to click a button, reset, submit, image, div, hyperlink element and perform an action.
<script>
function display()
{
}
</script>
<input type="button" onclick= "display()" />
Create JAVASCRIPT to change page background according to Button Click, if We click on Red button then Red Color, Green Button then Green Color, Blue button then Blue Color.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun()
{
document.getElementById("b").style.backgroundColor='orange';
}
function fun1()
{
document.getElementById("b").style.backgroundColor="red";
}
function fun2()
{
document.getElementById("b").style.backgroundColor="green";
}
function fun3()
{
document.getElementById("b").style.backgroundColor="blue";
}
</script>
</head>
<body id="b" onload="fun()">
<input type="button" value="Red" onclick="fun1()" />
<br>
<br>
<input type="button" value="Green" onclick="fun2()" />
<br>
<br>
<input type="button" value="Blue" onclick="fun3()" />
</body>
</html>
Create Event For Addition Program?
3 mouseover:-
When we mouse over the button, image or hyperlink then this event will be called.
4 onmouseout:-
when we remove mouse position from a button, image or hyperlink then this will be called.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("img").style.width="300px";
document.getElementById("img").style.height="300px";
}
function fun2()
{
document.getElementById("img").style.width="100px";
document.getElementById("img").style.height="100px";
}
</script>
</head>
<body>
<img src="logo.png" id="img" onmouseover="fun1()" onmouseout="fun2()" width="100" height="100" />
</body>
</html>
Example 2:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun1()
{
//alert("fun1");
document.getElementById("im").src ="img2.png";
}
function fun2()
{
//alert("fun2");
document.getElementById("im").src ="img3.jpg";
}
function fun4()
{
document.getElementById("im").src ="logo.png";
}
</script>
</head>
<body>
<img src="img1.jpg" width="200px" height="250px" onmouseover="fun1()" onmouseout="fun2()" onmousemove="fun3()" onmouseenter="fun4()" id="im" />
<br>
<br>
</body>
</html>
5 onkeyup:-
when we presss any key then first up key will work
6 onkeydown:-
when we relase key button then it will work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function showdata(a)
{
document.getElementById("board").innerHTML=a;
}
function changecolor(a)
{
document.getElementById("board").style.backgroundColor=a;
}
</script>
</head>
<body>
<div id="board" style="background-color: black;color:white;width:300px;height: 200px;border:2px solid red;float:left;" >
</div>
<select onchange="changecolor(this.value)" >
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<br>
<br>
<div style="clear: left"></div>
Type here
<br>
<textarea id="txt" onkeyup="showdata(this.value)" rows="5" cols="20">
</textarea>
</body>
</html>
7 onblur:-
It will be called when the cursor will be removed from textfield.
8 onfocus:-
It will be called when cursor will be assigned into textfield
Example of ONBLUR and ONFOCUS
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function fun1()
{
document.getElementById("txt1").style.backgroundColor='red';
}
function fun2()
{
document.getElementById("txt2").style.backgroundColor='green';
}
function fun3()
{
document.getElementById("txt1").style.backgroundColor='';
document.getElementById("txt2").style.backgroundColor='';
}
</script>
</head>
<body>
<input type="text" id="txt1" onblur="fun1()" onfocus="fun3()" />
<br>
<br>
<input type="text" id="txt2" onfocus="fun2()" />
</body>
</html>
9 onchange:-
RadioButton CheckBox:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(a)
{
//alert(a);
document.getElementById("res").innerHTML= "Selected Course is "+a;
}
</script>
</head>
<body>
<h1>Select Course</h1>
<input type="radio" name="r1" id="r1" value="C" onchange="fun(this.value)">C
<br>
<input type="radio" name="r1" id="r1" value="CPP" onchange="fun(this.value)">CPP
<br>
<input type="radio" name="r1" id="r1" value="DS" onchange="fun(this.value)">DS
<br>
<span id="res"></span>
</body>
</html>
..................................................................................................................
It is used to manage event operation in ListBox,SelectBox,RadioButton and CheckBox .
CheckBox Complete Code:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun()
{
var s=document.frm.chk;
s1="";
for(i=0;i<s.length;i++)
{
if(s[i].checked)
{
s1=s1+s[i].value;
}
}
document.getElementById("res").innerHTML=s1;
}
</script>
</head>
<body>
<form name="frm">
<input type="checkbox" id="chk[]" name="chk" value="C" onchange="fun()" />C
<br>
<br>
<input type="checkbox" id="chk[]" name="chk" value="CPP" onchange="fun()" />CPP
<br>
<br>
<input type="checkbox" id="chk[]" name="chk" value="DS" onchange="fun()" />DS
<br>
<br>
<span id="res"></span>
</form>
</body>
</html>
....................................................................................................
JavaScript Example for DropDownList and ListBox:-
We can select only single item
<select id="xyz">
<option value="Value Field ">Display Item</option>
</select>
ListBox:-
We can select multiple item's.
<select id="xyz" multiple="true">
<option value="Value Field ">Display Item</option>
</select>
Complete Explanation of DropDownlist,ListBox ,CheckedLIST using JS?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li
{
list-style-type: none;
}
li:hover
{
background-color: gray;
}
</style>
<script>
function fun(a)
{
document.getElementById("res").innerHTML=a;
}
function fun1()
{
course="";
for(i=0;i<document.getElementById("lst[]").length;i++)
{
if(document.getElementById("lst[]")[i].selected)
{
course = course+document.getElementById("lst[]")[i].value+" ";
}
}
document.getElementById("res").innerHTML=course;
}
function fun2()
{
course="";
//console.log(document.frm.chk.length);
for(i=0;i<document.frm.chk.length;i++)
{
if(document.frm.chk[i].checked)
{
course = course+document.frm.chk[i].value+" ";
}
}
document.getElementById("res").innerHTML=course;
}
</script>
</head>
<body>
<select onchange="fun(this.value)">
<option value="C">C</option>
<option value="CPP">CPP</option>
<option value="DS">DS</option>
<option value="JAVA">JAVA</option>
<option value=".NET">.NET</option>
</select>
<br>
<br>
<br>
<select id="lst[]" onchange="fun1()" multiple="true">
<option value="C">C</option>
<option value="CPP">CPP</option>
<option value="DS">DS</option>
<option value="JAVA">JAVA</option>
<option value=".NET">.NET</option>
</select>
<div id="res">
</div>
<form name="frm">
<ul>
<li> <input type="checkbox" name="chk" id="chk[]" value="C" onchange="fun2()">C</li>
<li> <input type="checkbox" name="chk" id="chk[]" value="CPP" onchange="fun2()">CPP</li>
<li> <input type="checkbox" name="chk" id="chk[]" value="DS" onchange="fun2()">DS</li>
<li> <input type="checkbox" name="chk"id="chk[]" value="JAVA" onchange="fun2()">JAVA</li>
<li> <input type="checkbox" name="chk" id="chk[]" value=".NET" onchange="fun2()">.NET</li>
</ul>
</form>
</body>
</html>
Post a Comment
If you have any doubt in programming or join online classes then you can contact us by comment .