Event:
Happening something is known as event.
Angularjs events:
Angularjs provides no. of events directives to handle DOM events like mouse clicks, moves, keyboard presses, change events etc. We can add AngularJS event listeners to our HTML elements by using one or more of following directives:
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
Example Explanation:
First include the AngularJS library in the application. The ng-app directive initializes the application. The ng-controller directive defines the controller. We use ng-click event directive for event listener. When we click on Click Me! Button, angularjs handles it with ng-click event directive and call countFunction() method which increase the count by 1.
Note: We can pass the $event object as an argument when calling the function. The $event object contains the original browser event object.
Example:
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> <body> <div ng-app="testApp" ng-controller="appCtrl"> <button ng-click="countFunction()">Click Me!</button> {{count }} </div> <script> var app = angular.module('testApp', []); app.controller('appCtrl', function($scope) { $scope.count = 0; $scope.countFunction= function() { $scope.count++; } }); </script> </body> </html> |