It is used to perform an action in HTML elements, event will be defined as a method and call under HTML elements using event action.
for example, onclick is the event that will be called when we click on the button.
Javascript is called an event-driven based language.
Javascript has multiple event methods
1) onkeypress ---> when we press keyboard any button then it will be called2) onkeyup ------> when we press any key then the first onkeyup event will be called
3) onmouseover ---> when we over the mouse under the HTML element then this event will be called
4) onmouseout ---> when we remove mouse control from the HTML element then this event will be
5) onfocus ------> When cursor will be assigned into a particular HTML element then this event will be called
6) onblur ----> When we remove the cursor from the HTML element then this event will be raised
7) onclick -----> When we click on Button then onclick event method will be called
8) onchange ----> when we select dropdown list or Listbox item then on-change will be called.
6) onblur ----> When we remove the cursor from the HTML element then this event will be raised
7) onclick -----> When we click on Button then onclick event method will be called
8) onchange ----> when we select dropdown list or Listbox item then on-change will be called.
Example of onmouseover and onmouseout:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("btn1").style.backgroundColor='red';
document.getElementById("btn1").style.width='200px';
document.getElementById("btn1").style.height='30px';
}
function fun2()
{
document.getElementById("btn1").style.backgroundColor='';
document.getElementById("btn1").style.width='';
document.getElementById("btn1").style.height='';
}
</script>
</head>
<body>
<input type="button" id="btn1" value="Click" onmouseover="fun1()" onmouseout="fun2()" />
</body>
</html>
Example of OnFocus and Onblur:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("txt1").style.backgroundColor='green';
document.getElementById("txt2").style.backgroundColor='red';
}
function fun2()
{
document.getElementById("txt1").style.backgroundColor='red';
document.getElementById("txt2").style.backgroundColor='green';
}
</script>
</head>
<body>
<input type="text" id="txt1" onfocus="fun1()" onblur="fun2()" />
<input type="text" id="txt2" />
</body>
</html>
........................................................................................................................................................
Example of Keyboard based event:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(data)
{
//alert(a);
document.getElementById("res").innerHTML=data;
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeyup="fun(this.value)" />
<div id="res"></div>
</body>
</html>
............................................................................................................................................
Example of onchange using dropdownlist:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
r1=" ";
r2=" ";
function fun(data)
{
r1=data;
document.getElementById("res").innerHTML=r1+r2;
}
function fun1(data)
{
r2=data;
document.getElementById("res").innerHTML=r1+r2;
}
</script>
</head>
<body>
<select id="country" onchange="fun(this.value)">
<option value="">Select Country</option>
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="CHINA">CHINA</option>
<option value="JAPAN">JAPAN</option>
</select>
<br><br>
<select id="state" onchange="fun1(this.value)">
<option value="">Select State</option>
<option value="MP">MP</option>
<option value="UP">UP</option>
<option value="AP">AP</option>
<option value="HP">HP</option>
</select>
<div id="res"></div>
</body>
</html>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
onchange example using RadioButton:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(data)
{
document.getElementById("res").innerHTML=data;
}
</script>
</head>
<body>
<input type="radio" name="r1" id="r1" value="Male" onchange="fun(this.value)">Male
<br><br>
<input type="radio" name="r1" id="r1" value="Female" onchange="fun(this.value)">Female
<br><br>
<div id="res"></div>
</body>
</html>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Example of CheckBox:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
c1="";
c2="";
function fun1()
{
if(document.getElementById("c1").checked)
{
c1 =document.getElementById("c1").value;
}
else
{
c1="";
}
document.getElementById("res").innerHTML=c1+c2;
}
function fun2()
{
if(document.getElementById("c2").checked)
{
c2 =document.getElementById("c2").value;
}
else
{
c2="";
}
document.getElementById("res").innerHTML=c1+c2;
}
</script>
</head>
<body>
<input type="checkbox" name="c1" id="c1" value="C" onchange="fun1()">C
<br><br>
<input type="checkbox" name="c2" id="c2" value="CPP" onchange="fun2()">CPP
<br><br>
<div id="res"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("btn1").style.backgroundColor='red';
document.getElementById("btn1").style.width='200px';
document.getElementById("btn1").style.height='30px';
}
function fun2()
{
document.getElementById("btn1").style.backgroundColor='';
document.getElementById("btn1").style.width='';
document.getElementById("btn1").style.height='';
}
</script>
</head>
<body>
<input type="button" id="btn1" value="Click" onmouseover="fun1()" onmouseout="fun2()" />
</body>
</html>
Example of OnFocus and Onblur:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1()
{
document.getElementById("txt1").style.backgroundColor='green';
document.getElementById("txt2").style.backgroundColor='red';
}
function fun2()
{
document.getElementById("txt1").style.backgroundColor='red';
document.getElementById("txt2").style.backgroundColor='green';
}
</script>
</head>
<body>
<input type="text" id="txt1" onfocus="fun1()" onblur="fun2()" />
<input type="text" id="txt2" />
</body>
</html>
........................................................................................................................................................
Example of Keyboard based event:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(data)
{
//alert(a);
document.getElementById("res").innerHTML=data;
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeyup="fun(this.value)" />
<div id="res"></div>
</body>
</html>
............................................................................................................................................
Example of onchange using dropdownlist:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
r1=" ";
r2=" ";
function fun(data)
{
r1=data;
document.getElementById("res").innerHTML=r1+r2;
}
function fun1(data)
{
r2=data;
document.getElementById("res").innerHTML=r1+r2;
}
</script>
</head>
<body>
<select id="country" onchange="fun(this.value)">
<option value="">Select Country</option>
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="CHINA">CHINA</option>
<option value="JAPAN">JAPAN</option>
</select>
<br><br>
<select id="state" onchange="fun1(this.value)">
<option value="">Select State</option>
<option value="MP">MP</option>
<option value="UP">UP</option>
<option value="AP">AP</option>
<option value="HP">HP</option>
</select>
<div id="res"></div>
</body>
</html>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
onchange example using RadioButton:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun(data)
{
document.getElementById("res").innerHTML=data;
}
</script>
</head>
<body>
<input type="radio" name="r1" id="r1" value="Male" onchange="fun(this.value)">Male
<br><br>
<input type="radio" name="r1" id="r1" value="Female" onchange="fun(this.value)">Female
<br><br>
<div id="res"></div>
</body>
</html>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Example of CheckBox:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
c1="";
c2="";
function fun1()
{
if(document.getElementById("c1").checked)
{
c1 =document.getElementById("c1").value;
}
else
{
c1="";
}
document.getElementById("res").innerHTML=c1+c2;
}
function fun2()
{
if(document.getElementById("c2").checked)
{
c2 =document.getElementById("c2").value;
}
else
{
c2="";
}
document.getElementById("res").innerHTML=c1+c2;
}
</script>
</head>
<body>
<input type="checkbox" name="c1" id="c1" value="C" onchange="fun1()">C
<br><br>
<input type="checkbox" name="c2" id="c2" value="CPP" onchange="fun2()">CPP
<br><br>
<div id="res"></div>
</body>
</html>
Example of Checkbox and Listbox:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun()
{
s = "";
console.log("click"+document.frm.chk.length);
for(i=0;i<document.frm.chk.length;i++)
{
if(document.frm.chk[i].checked)
{
s = s+ document.frm.chk[i].value;
}
}
s1="";
for(i=0;i<document.getElementById("lst[]").length;i++)
{
if(document.getElementById("lst[]")[i].selected)
{
s1 = s1+ document.getElementById("lst[]")[i].value;
}
}
document.getElementById("res").innerHTML = "name is " + document.frm.txtname.value+s + "Course is "+s1;
}
</script>
</head>
<body>
<form name="frm" action="">
<input type="text" name="txtname" /> <br>
<input type="checkbox" name="chk" value="C" />C <br>
<input type="checkbox" name="chk" value="C++" />C++ <br>
<input type="checkbox" name="chk" value="DS" />DS <br>
<br><br>
<select id="lst[]" multiple="true" style="width:300px;">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="DS">DS</option>
<option value="JAVA">Java</option>
<option value=".NET">.NET</option>
</select>
<br><br>
<input type="button" id="btnclick" onclick="fun()" value="Click" />
<br>
<div id="res"></div>
</form>
</body>
</html>
Example of Javascript to Change Background Image:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun(a)
{
// console.log(a);
document.getElementById("body").style.backgroundImage="url('"+a+"')";
}
</script>
</head>
<body id="body">
<select onchange="fun(this.value)">
<option value="">Select Theme</option>
<option value="bg1.jpg">Theme1</option>
<option value="bg2.jpg">Theme2</option>
<option value="bg3.jpg">Theme3</option>
</select>
</body>
</html>
POST Answer of Questions and ASK to Doubt