Please style sheet are not equal in internet explorer browser Firefox, Chrome, Safari, Apple and Opera browser please visit this website.

Thank for Visit My Site and Please sent me Shayari, Status and Quotes post request.

JavaScript - Events

Events
 
onBlur events
 

This event occurs when objects loses the focus. When we move to other object and looses one object the first object is called blurred or lost focus. In javascript we can program this loosing focus using the onblur event.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h3 align=center>

<u>In this example we used Javascript with in inverted quotes </u>

</h3>

<h4 align=center> just type text in text boxes and click on button</h4>

Name :<input type="t1" name="t1" id="tt1"

onblur="document.all.tt1.style.background='red';

document.all.tt1.style.color='white'"> <br>

Address : <input type="text" name="t2" id="tt2"

onblur="document.all.tt2.style.background='red';

document.all.tt2.style.color='white'"> <br>

<input type="button" value="Hit me" name="b1">

</body>

</html>

 
 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h3 align=center>

<u>In this example we used Javascript with in inverted quotes </u>

</h3>

<h4 align=center> just type text in text boxes and click on button</h4>

Name :<input type="t1" name="t1" id="tt1" onblur="document.bgColor='red'"> <br>

Address : <input type="text" name="t2" id="tt2" onblur="document.bgColor='blue'"> <br>

<input type="button" value="Hit me" name="b1">

</body>

</html>

 
 
 
onclick events
 

This event occurs when the user clicks on an object. When the mouse left button is clicked on an object the onclick event fires to which we can connect with a functionality and can it programmed accordingly.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow">

<h4 align =center> Please Click the mouse on Image</h4>

<blockquote> The height & width of Image will get   increased</blockquote>

<img id="img1" src="shark.jpg" height=100 width=100 onclick="ff()">

<script>

function ff()

{

document.all.img1.width=500 document.all.img1.height=500

}

</script>

</body>

</html>

 
 
 
ondblclick events
 

This event occurs when the user double clicks on an object. When the mouse left button is clicked twice quickly on an object the ondblclick event fires to which we can connect with a functionality and can it programmed accordingly.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow">

<h4 align =center> Please double Click the link</h4>

<a href="shark.jpg" ondblclick="ff()"> Double click on me to   load image </a>

<script>

function ff()

{

window.open("shark.jpg","")

}

</script>

</body>

</html>

 
 
 
onFocus events
 

This event occurs when objects receives the focus. When we start working with an object that object gets focus. Whether we click on that object or type in it the focus remains on that object. We can program this onfocus event when the focus is brought on the object specified with this event.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h3 align=center> In this example we used Javascript with in inverted quotes </h3>

Name :<input type="text" name="t1" onFocus="alert('It Got Focus ')"> <br>

Address : <input type="text" name="t2" onFocus="alert('Now focus is on second text box')"> <br>

</body>

</html>

 
 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h3 align=center> <u>In this example we used Javascript with in inverted quotes </u></h3>

<h4 align=center> just click in second text box and type some thing </h4>

Name :<input type="text" name="t1"> <br>

Address : <input type="text" name="t2" id="tt2" onFocus="document.all.tt2.style.background='red';document.all.tt2.style.c olor='yellow'"> <br>

</body>

</html>

 
 
 
Onkeydown event
 

This event occurs when user presses a key , at the time of pressing the key this event gets fired. When user presses a key from keyboard the key goes down and as soon as the key goes down this event gets fired and can be trapped by using onkeydown event. A programmer can get the key pressed by the user before flashing the character on the screen.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow>

<h4 align =center> Type character in the textbox </h4>

<blockquote> You will notice that the dialogbox appears   before the character appears in the textbox </blockquote>

name : <input type="text" name="t1" onkeydown="ff()">  

<script>

function ff()

{

alert("you pressed "+ event.keyCode)

}

</script>

</body>

</html>

 
 
 
Onkeypress event
 

This event gets fired when the key is pressed from keyboard and the hand from the key gets removed. This event even can sense the shift or alt key pressed while onkeydown event is unable to sense these special keys. So many key combinations can be made using this event or the menu shortcut keys can be programmed using this key event.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow>

<h4 align =center> Type character in the textbox </h4>

<blockquote>

You will notice that the dialogbox appears   before the character appears in the textbox

</blockquote>

name : <input type="text" name="t1" onkeypress="ff()">

<script>

function ff()

{

alert("ASCII Code of the key you pressed :"+   event.keyCode)

}

</script>

</body>

</html>

 
 
 
Onkeyup event
 

This event occurs when a key is pressed from the keyboard and pressure from the key gets removed. When the key comes up or there is no more pressure is on the key this event gets fired. If a key is pressed for a long and the character got printed on screen 20 times this event will get fired only once when the finger will be removed from that key.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow>

<h4 align =center> Type character in the textbox </h4>

<blockquote>

You will notice that the dialogbox appears   before the character appears in the textbox

</blockquote>

name : <input type="text" name="t1" onkeydown="ff()">

<script>

function ff()

{

alert("ASCII Code of the key you pressed :"+   event.keyCode)

}

</script>

</body>

</html>

 
 
 
onLoad
 
This event occurs when the web page gets loaded, this event should be typed in body tag of document.
 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white" onload="wel()">

<marquee direction=up behavior=alternate scrollamount=5 size=0>

<h1 align=center> Welcome </h1>

</marquee>

<script>

function wel()

{

document.bgColor='yellow'

document.fgColor='blue'

}

</script>

</body>

</html>

 
 
 
Onmousedown events
 

This event occurs when the mouse left key is pressed on some object. This event generates when the mouse key got pressed in onclick event when it is pressed are released then onclick event fires but onmousedown event gets fired when the key is pressed only before releasing the key this event gets fired.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white" onmousedown="ff()">

<h4 align =center> Please click on the web page anywhere you want</h4>

<script>

function ff()

{

alert("You clicked at : X "+event.screenX+ " Y: "+event.screenY)

}

</script>

</body>

</html>

 
 
 
onmousemove events
 

This event occurs when the user moves mouse. The x and y coordinates of the mouse pointer are trapped and when the position changes any of x or y this event fires. We can program the change of position of mouse on the web page using this event.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text=yellow onmousemove="ff()">

<h4 align =center> Please move the mouse </h4>

<blockquote>

The X axis and Y axis position of Cursor on screen will be displayed in textbox

</blockquote>

name : <input type="text" name="t1" onkeydown="ff()">

<script>

function ff()

{

t1.value="" t1.value="X : "+event.screenX + " Y :"+event.screenY

}

</script>

</body>

</html>

 
 
 
Onmouseout events
 

This event occurs when the cursor is moved out of the specified object. The position of object and position of mouse pointer is noted if the mouse pointer moves out of the object area this event gets fired.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h4 align =center> Please bring your mouse over the image and remove it</h4>

<img id="img1" src="water.jpg" height=200 width=200 onmouseover="ff()" onmouseout="ff1()">

<script>

function ff()

{

document.all.img1.width="190" document.all.img1.height="190"

}

function ff1()

{

document.all.img1.width="200" document.all.img1.height="200"

}

</script>

</body>

</html>

 
 
 
Onmouseover events
 

This event occurs when the cursor is brought over the specified object, the coordinates of the object are noted and if the position of cursor falls inside those coordinates this event gets fired, to which we can program accordingly.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white">

<h4 align =center> Please bring your mouse over the image</h4>

<img id="img1" src="water.jpg" height=200 width=200 onmouseover="ff()">

  <script>

function ff()

{

document.all.img1.width="180" document.all.img1.height="180"

}

</script>

</body>

</html>

 
 
 
Onmouseup events
 

This event occurs when the user clicks on some specified object and releases the mouse key this event gets fired. The time between the clicking and the releasing the key is the time of fire of this event.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white" onmousedown="ff()" onmouseup="ff1()">

<h4 align =center> Please Drag the mouse on the web page anywhere you want</h4>

<script>

var x,y,x1,y1 function ff()

{

x=event.screenX y=event.screenY

}

function ff1()

{

x1=event.screenX y1=event.screenY alert("You brought mouse down at : X "+x+ " Y: "+y+ " and brought it up at X:" +x1+" Y: "+y1)

}

</script>

</body>

</html>

 
 
 
onreset event
 

This event gets fired when user clicks on the reset button on a form. A form contains reset button which fires onreset event when it is clicked resulting it vacates all the filled objects like textbox , checkboxes etc.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=red text="white" >

<form name="sandeep" onreset="alert(' This form is being reseted')">

Name : <input type="text" name=t1 id="tt1" > <br>

Address : <input type="text" name=t2 > <br>

<input type="reset" name="b1"> <br>

</form>

</body>

</html>

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=red text="white" >

<form name="sandeep" onreset="pp()">

Name : <input type="text" name=t1 id="tt1" > <br>

Address : <input type="text" name=t2 id="tt2" > <br>

<input type="reset" name="b1" id="bb1"> <br>

</form>

<script>

function pp()

{

document.all.tt1.style.background='yellow' document.all.tt2.style.background='yellow' document.all.bb1.style.background='red' document.all.bb1.style.color='white' document.bgColor='magenta'

}

</script>

</body>

</html>

 
 
 
onresize event
 

This event gets fired when resizes the web page window. A web page window can be resized, an onresize event gets fired when a web page window is resized, to which we can program accordingly.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=blue text="white" onresize="pp()">

<marquee direction=up behavior=alternate>

These pages are Developed by Vishwajit Vatsa.

</marquee>

<h1>

<marquee direction=right behavior=alternate>

These pages are Developed by Sandeep Singh Bhandari.

</marquee>

</h1>

<h1>

If you minimize or maximize this page onresize event will be fired.

</h1>

<script>

function pp()

{

var a=confirm("Really want to resize") if (a)

{

document.bgColor='red'

}

else

{

document.bgColor='green'

}

}

</script>

</body>

</html>

 
 
 
onselect event
 

This event gets fired when user selects text in a textbox or text field. A text field contains text and we can select that text but when we select text of a text field onselect event gets fired.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=blue text="white" >

<form name="sandeep" onselect="alert('hi')">

Name : <input type="text" name=t1 id="tt1" > <br>

Address : <input type="text" name=t2 > <br>

Educational Qualification :

<select>

<option> 10th

<option> 12th

<option> Graduate

<option> Post Graduate

<option> PhD

</select><br>

Comments :<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<textarea rows=5 onselect="alert('yes delete this selected text')">

You can type this text and type your comments here

</textarea>

</form>

<script>

function ff()

{

alert("The value being set is " +document.all.tt1.value)

}

</script>

</body>

</html>

 
 
 
onsubmit events
 

This event gets fired when user clicks on the submit button. a form contains submit button which contains the onsubmit event. When this button is clicked this event gets fired.

 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=red text="white" >

<form name="sandeep" onsubmit="alert('got submitted')">

Name : <input type="text" name=t1 id="tt1" > <br>

Address : <input type="text" name=t2 > <br>

<input type="submit" name="b1"> <br>

</form>

</body>

</html>

 
 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=red text="white" >

<form name="sandeep" onsubmit="ff()">

Name : <input type="text" name=t1 id="tt1" > <br>

Address : <input type="text" name=t2 > <br>

<input type="submit" name="b1"> <br>

</form>

<script>

function ff()

{

alert("The value being set is " +document.all.tt1.value)

}

</script>

</body>

</html>

 
 
 
Unload Events
 
This event occurs when the focus from the page gets lost because of some link etc.
 
Example:
 

<html>

<head>

<title>events </title>

</head>

<body bgcolor=green text="white" onload="wel()" onunload="thx()">

<marquee direction=up behavior=alternate scrollamount=5 size=0>

<h1 align=center> Welcome </h1>

</marquee>

<h1> Click on link to unload this page </h1>

<a href='exeventonload.php'> hit me to unload this page </a>

<script>

function wel()

{

document.bgColor='yellow'

document.fgColor='blue'

}

function thx()

{

alert("Thanx to visit me ")

}

</script>

</body>

</html>
 
 
 

SHARE THIS PAGE

0 Comments:

Post a Comment

Circle Me On Google Plus

Subject

Follow Us