AngularJS | Events - GeeksforGeeks

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.
<!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>
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="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>
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="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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Basics
HTML-Misc
Picked
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular File Upload
Auth Guards in Angular 9/10/11
Angular | keyup event
What is AOT and JIT Compiler in Angular ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?