AngularJS Events

AngularJS provides its own directives for handling HTML events.

AngularJS Events

You can attach AngularJS event listeners to your HTML elements by utilizing one or more of these 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

The event directives enable us to execute AngularJS functions in response to specific user events.

An AngularJS event does not override an HTML event; instead, both events will be executed.

Mouse Events

Mouse events are triggered when the cursor moves over an element, in the following order:

ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave

They can also occur when a mouse button is clicked on an element, in this order:

ng-mousedown
ng-mouseup
ng-click

You can apply mouse events to any HTML element.

Example

Increment the count variable when the mouse moves over the <h1> element.

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h1 ng-mousemove=”count = count + 1″>Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.count = 0;
});
</script>

The ng-click Directive

The ng-click directive specifies the AngularJS code that will be executed when the element is clicked.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”count = count + 1″>Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.count = 0;
});
</script>

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”myFunction()”>Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
  $scope.count = 0;
$scope.myFunction = function() {
    $scope.count++;
  }
});
</script>