Post
Ask Question

Mouse/Pointer Events in AngularJS

Introduction
This article explains how Mouse/Pointer Events work in AngularJS. There are several Mouse/Pointer Events in AngularJS that are as follows:
  • Mouse Over Event
  • Mouse Enter Event
  • Mouse Down Event 
  • Mouse Up Event
  • Mouse Leave Event
  • Mouse Move Event
Here I am explaining each of those mouse events one by one.
 
  1. Mouse Over Event: A Mouse Over Event can be fired using the ng-mouseover directive of AngularJS. This event occurs when the mouse pointer hovers on the selected element.
  2. Mouse Enter Event: A Mouse Enter Event can be fired using the ng-mouseenter directive of AngularJS. This event is the same as the Mouse Over Image (ng-mouseover) event. When the pointer enters the selected element then it will fire.
  3. Mouse Down Event: AMouse Down Event can be fired using the ng-mousedown directive of AngularJS. This event is fired when the left mouse button is pressed down.
  4. Mouse Up Event: A Mouse Up Event can be fired using the ng-mouseup directive of AngularJS. This event occurs when the mouse left button is up after pressing down. 
  5. Mouse Leave Event: A Mouse Leave Event can be fired using the ng-mouseleave directive of AngularJS. This event occurs when the mouse pointer leaves the selected element
  6. Mouse Move Event: A Mouse Move Button can be fired using the ng-mousemove directive of AngularJS. This event occurs when the mouse pointer is moved within the selected element.
How to use it: To use any type of mouse event of AngularJS, you need to specify the directives as an attribute of the HTML Element like:

<ANY MouseEventDirective="{expression}">
...
</ANY>

Use the following procedure to create a sample of using mouse/pointer events.
 
Step 1: 
First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or download my source code and then fetch it or click on this link and download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application as in the following:
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <script src="angular.min.js"></script>  
  5.   </head>  
Step 2:
Now I will show you the use of various mouse events of AngularJS that are already explained above.
  1.  Use of ng-mouseover: The following code shows how to use ng-mouseover.
    1. <button ng-mouseover="MouseOverCount = MouseOverCount + 1" ng-init="MouseOverCount=0">  
    2.       Increment Value when Mouse over on the Image.  
    3.     </button></br>  
    4.     Increment on Mouse Over: {{MouseOverCount}}  
    5. </br></br>  
    Here MouseOverCount is a variable, its initial value is zero, defined by the ng-init directive and its value will be incremented when the mouse will be oven/enter on the button.

  2. Use of ng-mouseenter: The following code shows how to use ng-mouseenter.
    1. <button ng-mouseenter="MouseEnterCount = MouseEnterCount + 1" ng-init="MouseEnterCount=0">  
    2.       Increment Value when Mouse Enter on The Button  
    3.     </button></br>  
    4.     Increment on Mouse Enter: {{MouseEnterCount}}  
    5. </br></br>  
    Here MouseEnterCount is a variable, its initial value is zero, defined by the ng-init directive and  its value will increment when the mouse enters the button.

  3. Use of ng-mousedown: The following code shows how to use ng-mousedown.
    1. <button ng-mousedown="MouseDownCount = MouseDownCount + 1" ng-init="MouseDownCount=0">  
    2.       Increment Value when Mouse Down on the Button  
    3.     </button></br>  
    4.     Increment on Mouse Down: {{MouseDownCount}}  
    5. </br></br>  
    Here MouseDownCount is a variable, its initial value is zero, defined by the ng-init directive and its value will increment when the mouse left button is pressed down .

  4. Use of ng-mouseup: The following code shows how to use ng-mousedown.
    1. <button ng-mouseup="MouseUpCount = MouseUpCount + 1" ng-init="MouseUpCount=0">  
    2.       Increment Value when Mouse Up after Mouse Down  
    3.     </button></br>  
    4.     Increment on Mouse Up: {{MouseUpCount}}  
    5. </br></br>  
    Here MouseUpCount is a variable, its initial value is zero, defined by the ng-init directive and its value will increment when the mouse left button is up after pressing down.

  5. Use of ng-mouseleave: The following code shows how to use ng-mouseleave.
    1. <button ng-mouseleave="MouseLeaveCount = MouseLeaveCount + 1" ng-init="MouseLeaveCount=0">  
    2.       Increment Value when Mouse Leave From the Button  
    3.     </button></br>  
    4.     Increment on Mouse Leave: {{MouseLeaveCount}}  
    5. </br></br>  
    Here MouseLeaveCount is a variable, its initial value is zero, defined by the ng-init directive and its value will increment when the mouse leaves from the button.

  6. Use of ng-mousemove: The following code shows how to use ng-mousemove.
    1. <button ng-mousemove="MouseMoveCount = MouseMoveCount + 1" ng-init="MouseMoveCount=0">  
    2.       Increment Value when Mouse Move on the Button  
    3.     </button></br>  
    4.     Increment on Mouse Move: {{MouseMoveCount}}  
    5. </br></br>  
    Here MouseMoveCount is a variable, its initial value is zero, defined by the ng-init directive and its value will increment when the mouse moves on the button.
Complete Code:
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <script src="angular.min.js"></script>  
  5.   </head>  
  6.   
  7.   <body>  
  8.   
  9. <button ng-mouseover="MouseOverCount = MouseOverCount + 1" ng-init="MouseOverCount=0">  
  10.       Increment Value when Mouse over on the Image.  
  11.     </button></br>  
  12.     Increment on Mouse Over: {{MouseOverCount}}  
  13. </br></br>  
  14.   
  15. <button ng-mouseenter="MouseEnterCount = MouseEnterCount + 1" ng-init="MouseEnterCount=0">  
  16.       Increment Value when Mouse Enter on The Button  
  17.     </button></br>  
  18.     Increment on Mouse Enter: {{MouseEnterCount}}  
  19. </br></br>  
  20.   
  21. <button ng-mousedown="MouseDownCount = MouseDownCount + 1" ng-init="MouseDownCount=0">  
  22.       Increment Value when Mouse Down on the Button  
  23.     </button></br>  
  24.     Increment on Mouse Down: {{MouseDownCount}}  
  25. </br></br>  
  26.   
  27. <button ng-mouseup="MouseUpCount = MouseUpCount + 1" ng-init="MouseUpCount=0">  
  28.       Increment Value when Mouse Up after Mouse Down  
  29.     </button></br>  
  30.     Increment on Mouse Up: {{MouseUpCount}}  
  31. </br></br>  
  32.   
  33. <button ng-mouseleave="MouseLeaveCount = MouseLeaveCount + 1" ng-init="MouseLeaveCount=0">  
  34.       Increment Value when Mouse Leave From the Button  
  35.     </button></br>  
  36.     Increment on Mouse Leave: {{MouseLeaveCount}}  
  37. </br></br>  
  38.   
  39.   
  40. <button ng-mousemove="MouseMoveCount = MouseMoveCount + 1" ng-init="MouseMoveCount=0">  
  41.       Increment Value when Mouse Move on the Button  
  42.     </button></br>  
  43.     Increment on Mouse Move: {{MouseMoveCount}}  
  44. </br></br>  
  45.   
  46.   </body>  
  47. </html>  

Output

Happy Coding :)


Similar Articles