Post
Ask Question

Mouse Event in TypeScript: Part 1

Introduction

 
A mouse event occurs when a user moves the mouse in the user interface of an application. There are seven types of mouse events, they are:
  1. Onclick
  2. Ondblclick
  3. Onmousedown
  4. Onmouseup
  5. Onmouseover
  6. Onmouseout
  7. Onmousemove
In this article, I am describing the "Onclick" and "Ondblclick" mouse events in TypeScript.
 

Onclick

 
The Onlclick event is the simplest event. The onclick event occurs when the user clicks their mouse on an object on your web page. The onclickevent does not fire for right mouse clicks as well.
 
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.
 

OndblClick

 
The OndblClick event occurs when the user double-clicks an element. In other word, it is triggered when the mouse button is pressed and released twice over the same spot.
 
This event is defined by the XHTML specification, but not by the DOM specification.
 
Complete Program
 
Onclick_Ondblclick.ts
  1. class Onclick_Ondblclick {  
  2.  Onclick() {  
  3.   alert("Fire Onclick event");  
  4.  }  
  5.  Ondblclick() {  
  6.   alert("Fire Ondblclick event");  
  7.  }  
  8. }  
  9. window.onload = () => {  
  10.  var obj = new Onclick_Ondblclick();  
  11.  var bttnclick = < HTMLButtonElement > document.getElementById("onclick");  
  12.  var bttndblclick = < HTMLButtonElement > document.getElementById("ondblclick");  
  13.  bttnclick.onclick = function() {  
  14.   obj.Onclick();  
  15.  }  
  16.  bttndblclick.ondblclick = function() {  
  17.   obj.Ondblclick();  
  18.  }  
  19. };   
Onclick_Ondblclick_Event_Demo.html
  1. < !DOCTYPE html >  
  2.  <  
  3.  html lang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  meta charset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>   <  
  11.  link rel = "stylesheet"  
  12. href = "app.css"  
  13. type = "text/css" / >  
  14.  <  
  15.  script src = "Onclick_Ondblclick.js" > < /script>   <  
  16.  /head>   <  
  17.  body >  
  18.  <  
  19.  h3 style = "color: #0033CC" > Onclick and Ondblclick event in TypeScript < /h3>   <  
  20.  div id = "content" >  
  21.  <  
  22.  input id = "onclick"  
  23. type = "button"  
  24. value = "Onclick Event" / >  
  25.  <  
  26.  input id = "ondblclick"  
  27. type = "button"  
  28. value = "Ondblclick Event" / >  
  29.  <  
  30.  /div>   <  
  31.  /body>   <  
  32.  /html>    
Onclick_Ondblclick.js 
  1. var Onclick_Ondblclick = (function() {  
  2.  function Onclick_Ondblclick() {}  
  3.  Onclick_Ondblclick.prototype.Onclick = function() {  
  4.   alert("Fire Onclick event");  
  5.  };  
  6.  Onclick_Ondblclick.prototype.Ondblclick = function() {  
  7.   alert("Fire Ondblclick event");  
  8.  };  
  9.  return Onclick_Ondblclick;  
  10. })();  
  11. window.onload = function() {  
  12.  var obj = new Onclick_Ondblclick();  
  13.  var bttnclick = document.getElementById("onclick");  
  14.  var bttndblclick = document.getElementById("ondblclick");  
  15.  bttnclick.onclick = function() {  
  16.   obj.Onclick();  
  17.  };  
  18.  bttndblclick.ondblclick = function() {  
  19.   obj.Ondblclick();  
  20.  };  
  21. };   
Output 1
 
onclick.jpg
 
Output 2
 
Double-click on ondblclick button
 
ondblclick.jpg


Similar Articles