Open In App
Related Articles

AngularJS Events

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
    </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=
    </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=
    </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



Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials