<!
-- Mouse events
Mouse Click Event:
When mouse is click on an element. Following is an example of JavaScript mouse
click event: -->
<html>
<head>
<title>Click 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="[Link]" height=100 width=100 > <script>
function ff() {
[Link] = 500;
[Link] = 500;
}
</script>
</body>S</html>
<!-- Mouse down event:
When the mouse button is pressed over the element. Following is the example to
understand this event. -->
<html>
<head>
<title>Onmousedown events </title>
</head>
<body bgcolor=green text="white" > <h4 align=center> Please click on the web page anywhere you want</h4>
<script>
function ff() {
alert("You clicked at : X " + [Link] + " Y: " + [Link])
}
</script>
</body>
</html>
<!--Mouse move event:
The following is an example of mousemove event. -->
<html>
<head>
<title>Onmousemove events </title>
</head>
<body bgcolor=green text="white" > <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" > <script>
function ff() {
[Link] = "X: " + [Link] + " Y: " + [Link]
}
</script>
</body>
</html>
<!--Mouse out event:
When the cursor of the mouse leaves an element. The following is an example of
Mouseout event. -->
<html>
<head>
<title>Onmouseout 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="C:\Users\HP PC\Desktop\[Link]" height=200 width=200
/>
<script>
function ff() {
[Link] = "190"
[Link] = "190"
}
function ff1() {
[Link] = "300"
[Link] = "300"
}
</script>
</body>
</html>
<!-- Mouse over event:
When the cursor of the mouse comes over the element. The following is an example of
mouseover event. -->
<html>
<head>
<title>Onmouseover events </title>
</head>
<body bgcolor=green text="white">
<h4 align=center>Please bring your mouse over the image</h4>
<img id="img1" src="C:\Users\HP PC\Desktop\[Link]" height=200 width=200
/>
<script>
function ff() {
[Link] = "180"
[Link] = "180"
}
</script>
</body>
</html>
<!-- Mouseup event:
When the mouse button is released over the element . The following is an example of
mouseup event. -->
<html>
<head>
<title>Onmouseup events </title>
</head>
<body bgcolor=green text="white" > <h4 align=center>Please Drag the mouse on the web page anywhere you want</h4>
<script>
var x, y, x1, y1
function ff() {
x = [Link]
y = [Link]
}
function ff1() {
x1 = [Link]
y1 = [Link]
alert("You brought mouse down at : X " + x + " Y: " + y + " and brought
it up at X: " + x1 + " Y: " + y1)
}
</script>
</body>
</html>
<!-- DOM / UI events
Load event:
This event is fired when the browser finishes the loading of the page. The example
is given below for better understanding of load event.-->
<html>
<head>
<title>OnLoad events </title>
</head>
<body bgcolor=green text=”white” > <marquee direction=up behavior=alternate scrollamount=5 size=0>
<h1 align=center> Welcome </h1>
</marquee>
<script>
function wel() {
[Link] = 'yellow'
[Link] = 'blue'
}
</script>
</body></html>
<!-- Reset event:
The reset event is fired when the user clicks on the reset button on the form.
Following is the example to understand the reset event. -->
<html>
<head>
<title>Onreset events</title>
</head>
<body bgcolor=red text="white">
<form name="Shagufta" 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>
<!-- Resize event:
This event is fired when the user resizes the window of the browser. The example is
given below. -->
<html>
<head>
<title>Onresize events</title>
</head>
<body bgcolor=blue text="white" > <marquee direction=up behavior=alternate>
These pages are Developed by Shagufta Chaudhari.
</marquee>
<h1>
<marquee direction=right behavior=alternate>
These pages are Developed by ABC.
</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) {
[Link] = 'red'
}
else {
[Link] = 'green'
}
}
</script>
</body>
</html>
<!-- Select event:
The select event is fired when input text is selected. For better understanding
please have a look at the following example. -->
<html>
<head>
<title>Onselect events</title>
</head>
<body bgcolor=blue text="white">
<form name="Shagufta" > 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>
<textarea rows=5 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 " + [Link])
}
</script>
</body>
</html>
<!-- Submit event:
This event is fired when the user click on the submit button. Following is an
example of submit event. -->
<html>
<head>
<title>Onsubmit events</title>
</head>
<body bgcolor=red text="white">
<form name="Shagufta" 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>
<!-- Unload event:
This event is fired when the user leaves the current webpage, the browser unloads
it. The example is given below for better understanding. -->
<html>
<head>
<title>Unload events</title>
</head>
<body bgcolor=green > <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='[Link]'> hit me to unload this page </a>
<script>
function wel() {
[Link] = 'yellow'
[Link] = 'blue'
}
function thx() {
alert("Thanx for visiting")
}
</script>
</body>
</html>
<!--
Keyboard events
keydown event
This event fire when the user presses a key. Following is an example of keydown
event. -->
<html>
<head>
<title>onkeydown 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" > <script>
function ff() {
alert("you pressed " + [Link])
}
</script>
</body>
</html>
<!-- keypress event
This event fire when the user presses a key. Following is an example of keypress
event. -->
<html>
<head>
<title>onKeyPress 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" > <script>
function ff() {
alert("ASCII Code of the key you pressed : " + [Link])
}
</script>
</body>
</html>
<!-- keyup event:
The keyup event fire when the user released the key. Following is an example of
keyup event. -->
<html>
<head>
<title>onkeyup 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" > <script>
function ff() {
alert("ASCII Code of the key you pressed : "+ [Link])
}
</script>
</body>
</html>
<!-- Focus events
blur event:
The blur event will be fired when the user moves the focus away from a form
element. For better understanding of this event, please have a look at the
following example. -->
<html>
<head>
<title>OnBlur events </title>
</head>
<body bgcolor=green text="white">
<h3 align=center>
<u>In this OnBlur 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="text" name="t1" id="tt1"
='red';
[Link]='white'"> <br>
Address : <input type="text" name="t2" id="tt2"
='red';
[Link]='white'"> <br>
<input type="button" value="Hit me" name="b1">
</body></html>
<!-- focusin event:
The focusin event is fired when an element is about to receive focus. For better
understanding of this event, please have a look at the following example. -->
<html>
<head>
<title>onFocus 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" text Got Focus ')">
<br>
Address : <input type="text" name="t2" focus is on second
text box')"> <br>
</body>
</html>
