AngularJS Event Handlers: Events directives signal the application to respond to changes in the environment. Some of the changes may be user-initiated, others may be automated program functions. The following directives can be placed in your HTML to listen for events that your application can respond to.
- 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
The event directives enable you to call AngularJS functions at specific user events. If you have both an Angular event and an HTML event, both events will take place.
Mouse Events
A Mouse Event happens when the user moves a cursor over ng-mouseleave HTML element:
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
- ng-mouseover
- ng-mouseup
Or when the button is clicked on an element
- ng-mousedown
- ng-mouseup
- ng-click
Mouse events can be added to any element on the web page. We, Will, examine the ng-click directive.
AngularJS Event Handlers Example (Mouse Event)
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="exampleCtrl ng-app="exampleApp"">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{count }}</p>
</div>
<script>
var app = angular.module('exampleApp', []);
app.controller('exampleCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
AngularJS Event Handlers Example Output
Although not rendered here, in your web browser, you will see a button. Upon clicking the button, the number below it will increase by incrementally.