AngularJS | Events

Events in AngularJS can be added using the Directives mentioned below:

  • ng-mousemove: Movement of mouse leads to the execution of event.
  • ng-mouseup: Movement of mouse upwards leads to the execution of event.
  • ng-mousedown: Movement of mouse downwards leads to the execution of event.
  • ng-mouseenter: Click of the mouse button leads to the execution of event.
  • ng-mouseover: Hovering of the mouse leads to the execution of event.
  • ng-cut: Cut operation leads to the execution of the event.
  • ng-copy: Copy operation leads to the execution of the event.
  • ng-keypress: Press of key leads to the execution of the event.
  • ng-keyup: Press of upward arrow key leads to the execution of the event.
  • ng-keydown: Press of downward arrow key leads to the execution of the event.
  • ng-click: Single click leads to the execution of the event.
  • ng-dblclick: Double click leads to the execution of the event.

Example 1: Showing action on the occurrence of any Mouse Movement Event. This includes events of dragging the mouse to cause movement of the cursor on the screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body>
    <p>
        Move the mouse over GeeksforGeeks
        to increase the Total Count.
    </p>
  
    <div ng-app="App1" ng-controller="Ctrl1">
  
        <h1 ng-mousemove="count = count + 1">
            Geeks for Geeks
        </h1>
  
        <h2>Total Count:</h2>
        <h2>{{ count }}</h2>
    </div>
  
    <script>
        var app = angular.module('App1', []);
        app.controller('Ctrl1', function ($scope) {
            $scope.count = 0;
        });
    </script>
</body>
  
</html>

chevron_right






                        filter_none








Output:






Example 2: This example showing the $event obj for calling the function on Mouse Movement Event. Here, $event object enables the occurrence of a mouse movement event. 











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <script src= 


"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 


    </script> 


</head> 


  


<body> 


    <p> 


        Mouse over Geeks for Geeks to display 


        the value of clientX and clientY. 


    </p> 


    <div ng-app="App1" ng-controller="Ctrl1"> 


  


        <h1 ng-mousemove="myFunc($event)"> 


            Geeks for Geeks 


        </h1> 


  


        <h4>Coordinates: {{x + ', ' + y}}</h4> 


    </div> 


  


    <script> 


        var app = angular.module('App1', []); 


        app.controller('Ctrl1', function ($scope) { 


            $scope.myFunc = function (gfg) { 


                $scope.x = gfg.clientX; 


                $scope.y = gfg.clientY; 


            } 


        }); 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:








Example 3: This example shows the action being performed forOn Click Event. Here, the click of the mouse button leads to the performance of some action.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <script src= 


"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 


    </script> 


</head> 


  


<body> 


    <p> 


        Click on GeeksforGeeks to 


        increase the Total Count. 


    </p> 


  


    <div ng-app="App1" ng-controller="Ctrl1"> 


  


        <button ng-click="count = count + 1"> 


            Geeks for Geeks 


        </button> 


          


        <h2>Total Count:</h2> 


        <h2>{{ count }}</h2> 


    </div> 


  


    <script> 


        var app = angular.module('App1', []); 


        app.controller('Ctrl1', function ($scope) { 


            $scope.count = 0; 


        }); 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:






full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
riarawal99
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.