Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | Events

  • Last Updated : 22 Apr, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

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.






<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

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.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :