The event in JavaScript:-  It is used to perform an action in HTML elements, event will be defined as a method and call under HTML elements.

for example, on click is the event that will be called when we click on the button.

Javascript has multiple event methods

1)   onkeypress  --->  when we press keyboard any button then it will be called

2)   onkeyup  ------> when we press any key then 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 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 dropdownlist 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>

                                                      

Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post