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 Answer of Questions and ASK to Doubt