AngularJS Events

Last Updated : 09 Aug, 2022

An Events in AngularJS can be used to perform particular tasks, based on the action taken. Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML Event. It can be added using the Directives mentioned below:

ng-mousemove: The movement of the mouse leads to the execution of the event.
ng-mouseup: Movement of the mouse upwards leads to the execution of the event.
ng-mousedown: Movement of the mouse downwards leads to the execution of the event.
ng-mouseenter: Click of the mouse button leads to the execution of the event.
ng-mouseover: Hovering the mouse leads to the execution of the 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.
ng-blur: Fired when an HTML element loses its focus.
ng-change: It is used whenever the value of an input element changes.
ng-focus: It is used to apply custom behavior when an element is focused.
ng-paste: It is used to specify custom behavior functions when the text in input fields is pasted into an HTML element.
ng-mouseleave: It is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element.

Example 1: This example illustrates 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.

HTML

<!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"> 
            GeeksforGeeks 
        </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:

ng-mousemove Directive

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

HTML

<!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 GeeksforGeeks to display  
          the value of clientX and clientY.  
    </p> 
    <div ng-app="App1"
         ng-controller="Ctrl1"> 
        <h1 ng-mousemove="myFunc($event)"> 
            GeeksforGeeks 
        </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:

ng-mousemove Directive

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

HTML

<!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"> 
             GeeksforGeeks  
        </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>