AngularJS | Events
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 = </ 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: