Event in JavaScript: Part 1

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

After clicking this button you will find this type:

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

After double-clicking this button you will find this type: