Introduction
In this article you will learn about mouse events. There are seven types of mouse events, they are:
- Onclick
- Ondblclick
- Onmousedoen
- Onmousemove
- Onmouseover
- Onmouseout
- Onmouseup
I have divided the descriptions of these mouse events into three parts.
First Part
You will learn about OnClick and OnDblClick in this article.
Onclick: The Onclick event is raised when the user clicks on an element.
Note: When using the onclick event to trigger an action, also consider adding this same action to the onkeydown event, to allow the use of that same action by people who don't use a mouse or a touch screen.
Example
<!DOCTYPE html >
<html>
<head>
<title>Event</title>
<style>
#main
{
width: 300px;
height: 300px;
display: none;
background: red;
}
</style>
</head>
<body>
<div id="main">
<center>
<h1>
Show Div</h1>
</center>
</div>
<input type="button" value="clickme" onclick="demo()" />
<script>
function demo() {
alert("onclick Event detected!")
document.getElementById("main").style.display = "block";
}
</script>
</body>
</html>
Output
![Clip.jpg]()
After click this button you will find this type:
![div.jpg]()
OnDbkClick: The OnDbkClick event is raised when the user double-clicks an element.
<!DOCTYPE html >
<html>
<head>
<title>Event</title>
<style>
#main
{
width: 300px;
height: 300px;
display: none;
background: red;
}
</style>
</head>
<body>
<div id="main">
<center>
<h1>
Show Div</h1>
</center>
</div>
<input type="button" value="clickme" OnDblClick="demo()" />
<script>
function demo() {
alert("onDblclick Event detected!")
document.getElementById("main").style.display = "block";
}
</script>
</body>
</html>
Output
![Clipboard01.jpg]()
After double-clickinf this button you will find this type:
![dblclick.jpg]()