JavaScript Events
onclick(): click on object (elements) then event are occurred
<input type=button value="click me" onclick="alert(' Welcome to Onclick event')">
________________________
ondblclick(): ondblclick event occurred when two time click on object for example:
<script>
function sum()
{
a= 20;
b=30;
c = a+b;
document.write(c);
}
</script>
<input type=button value="addition" ondblclick="sum(); ">
___________________________
onmousemove() or mouseover:
- this event is working with your cursor is going inside a Object then Mousemoved are Fire
- if your cursor are go inside an elements then move event occured
<script>
function news()
{
alert("todays we are worked with JavaScript events \n All Subjects are Important for Future");
}
</script>
<br><br>
<p style="background-color:yellow;" onmousemove="alert('this is a Mouse Move Event');">welcome</p>
<br><br>
<input type=button onmousemove="news();" value="NEWS">
Mouseover():
<script>
function abc()
{
alert("Welcome to Mouse Move event");
}
function xyz()
{
alert("Welcome to Mouse Over Event");
}\
</script>
<input type=button onmousemove="abc();" value=" Mouse Move ">
<input type=button onmouseover="xyz();" value=" Mouse Over ">
_____________________
MouseOut(): mouse out is working with if you are loss or leave the cursor on object
<script>
function test()
{
alert("This is a Mouse Out event");
}
</script>
<input type=button onmouseout="test();" value=" Mouse Out ">
___________________________
onfocus(): this event occurred when you tab or click on object
- The onfocus event is most often used with <input>, <select>, and <a>.
<script>
function y()
{
alert("Please Not Write Content Here");
document.frm.t1.value="Avadh Tutor";
}
function z()
{
document.frm.t2.value="";
}
</script>
<form name="frm">
<input type="text" name="t1" value="" onfocus="y();" ><br>
<input type="text" name="t2" value="" onfocus="z();">
</form>
Example 2: Onfocus with Color Change
<script>
function setStyle(x)
{
var a = document.getElementById(x);
document.getElementById(x).style.background="black";
document.getElementById(x).style.color="white";
document.getElementById(x).style.fontSize="10";
}
</script>
First name: <input type="text" onfocus="setStyle(this.id)" id="zxcvxx">
<br />
Last name: <input type="text" onfocus="setStyle(this.id)" id="cvx">
__________________________________
onkeyup(): when your key is up inside a keyboard
- when the user releases a key
<script>
function y()
{
alert("Please Not Write Content Here");
document.frm.t1.value="Bhavin";
}
function z()
{
document.frm.t2.value="";
}
</script>
<form name="frm">
<input type="text" name="t1" value="" onkeyup="y();" ><br>
<input type="text" name="t2" value="" onkeyup="z();">
</form>
__________________________
onChange(): when the value of an element has been changed, For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed, onchange event occured when you change your data (value)
Example :
<script>
function abc()
{
alert(document.frm.product.value);
}
</script>
</head>
<body>
<form name="frm" method=post>
<select name="product" onchange="abc();" >
<option value="this">INDIA</option>
<option value="is">B</option>
<option value="best">C</option>
<option value="you">D</option>
</select>
</form>
___________________________________________________
onSubmit(): onSubmit event is Work with form with Submit Button, When you click on Submit then onsubmit event will be fired
Example:
<script>
function abc()
{
alert(document.frm.nm.value);
alert(document.frm.pass.value);
}
</script>
<form name=frm onsubmit="abc()" method=post>
name<input type=text name=nm value="">
password<input type=password name=pass value="">
<input type=submit value="click now" >
</form>
_____________________________________________________
onBlur() : most often used with form validation code
<input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()" placeholder="Enter Your Name">
<script>
function focusFunction() {
document.getElementById("myInput").style.background = "tomato";
}
function blurFunction() {
document.getElementById("myInput").style.background = "blue";
}
</script>
_________________________________________
onReset(): occurs when a form is reset (clear).
Example :
<form onreset="my()">
Enter name: <input type="text" placeholder="Enter Name">
<input type="reset">
</form>
<script>
function my() {
alert("The form was reset");
}
</script>
No comments:
Post a Comment