Angularjs has a set of event directives, which are used to set custom behavior and AngularJS has the ability to add performance that can handle all kinds of events.
Generally, while in developing applications we use different types of HTML DOM events like mouse click, key press, change event etc, similarly angularjs has its own event directive for DOM interaction.
AngularJS provides the number of events that are related to HTML controls. The events in AngularJS are as follows –
ng-blur, ng-change, ng-click, ng-copy, ng-cut, ng-dbl-click, ng-keydown, ng-mouseover, ng-mousemove, ng-mouseleave, ng-mouseenter, ng-mouseup, ng-mousedown, ng-keypress, ng-keyup.
When building web based applications, sooner or later your application will have to handle DOM events like mouse click, move, keyboard press, event etc.
For example, if there is a button on the page and you want to perform some process when the button is clicked, we can use the ng-click event directive please see the example below –
Example Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse Clicke Over Me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>