Post
Ask Question

Event in JavaScript: Part 1

Introduction

 
In this article, you will learn about mouse events. There are seven types of mouse events, they are:
  1. Onclick
  2. Ondblclick
  3. Onmousedoen
  4. Onmousemove
  5. Onmouseover
  6. Onmouseout
  7. 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
  1. <!DOCTYPE html >  
  2. <html>  
  3. <head>  
  4.     <title>Event</title>  
  5.     <style>  
  6.         #main  
  7.         {  
  8.             width: 300px;  
  9.             height: 300px;  
  10.             display: none;  
  11.             background: red;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <div id="main">  
  17.         <center>  
  18.             <h1>  
  19.                 Show Div</h1>  
  20.         </center>  
  21.     </div>  
  22.     <input type="button" value="clickme" onclick="demo()" />  
  23.     <script>  
  24.         function demo() {  
  25.             alert("onclick Event detected!")  
  26.             document.getElementById("main").style.display = "block";  
  27.         }  
  28.    
  29.     </script>  
  30. </body>  
  31. </html> 
Output
 
Clip.jpg
 
After clicking this button you will find this type: 
div.jpg
 
OnDbkClick:  The OnDbkClick event is raised when the user double-clicks an element.
  1.    
  2. <!DOCTYPE html >  
  3. <html>  
  4. <head>  
  5.     <title>Event</title>  
  6.     <style>  
  7.         #main  
  8.         {  
  9.             width: 300px;  
  10.             height: 300px;  
  11.             display: none;  
  12.             background: red;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div id="main">  
  18.         <center>  
  19.             <h1>  
  20.                 Show Div</h1>  
  21.         </center>  
  22.     </div>  
  23.     <input type="button" value="clickme" OnDblClick="demo()" />  
  24.     <script>  
  25.         function demo() {  
  26.             alert("onDblclick Event detected!")  
  27.             document.getElementById("main").style.display = "block";  
  28.         }  
  29.    
  30.     </script>  
  31. </body>  
  32. </html> 
Output 
 
Clipboard01.jpg
 
After double-clicking this button you will find this type: 
 
dblclick.jpg


Similar Articles