Open In App

AngularJS Events

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Output:

ng-click Directive

R
riarawal99
Improve
Article Tags :

Explore

Lightbox