PROGRAM TO IMPLEMENT MOUSE EVENTS USING JavaScript
AIM:
To
implement all the mouse events using JavaScript.
PROCEDURE
Step1 : Start.
Step2 : Open the file (JavaScriptMouseEvent.html)
with any Web Browser (Eg. Firefox)
Step3 : Bring Your Mouse cursor to the Black Square
to see Mouse Over Event.
Step4 : Move Out cursor from the black square to
see Mouse Out Event.
Step5 : Click on the Black Square to see the Mouse
Click Event.
Step6 : Click on the Black Square to see the Mouse
Click Event.
Step7 : Mouse Up and Mouse Down on the black square
to see Mouse Event.
Step8 : Stop.
Program Source Code: JavaScriptMouseEvent.html
<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox =
document.getElementById("txt1");
oTextbox.value +=
"\n" + oEvent.type;
}
</script>
</head>
<body>
<P>Use
your mouse to click and double click the black square.</p>
<div style="width: 200px; height: 200px; background-color:
black"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)"
id="div1"></div>
<P><textarea id="txt1" rows="35"
cols="50"></textarea></p>
</body>
</html>
Output:
RESULT:
Thus the mouse
events are implemented using
JavaScript and the results are verified successfully.
