AngularJS Events

AngularJS has its own HTML event directives.

AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of the 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

Event instructions allow us to run AngularJS functions on certain user events.

AngularJS events do not override HTML events, both events will be executed.

Mouse events

When the cursor moves over the element, the following sequence of mouse events will occur:

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

Or, when the element is clicked by the mouse, the following sequence of events will be triggered:

• ng-mousedown
• ng-mouseup
• ng-click

You can add mouse events to any HTML element.

Example

Increase the count variable when the mouse moves over the H1 element:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Move the mouse over me!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Try It Yourself

ng-click directive

ng-click Directives define AngularJS code that will be executed when an 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>

Try It Yourself

You can also reference a function:

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>

Try It Yourself

Toggle, true/false

If you want to display some HTML code when clicking the button and hide it when clicking the button again, like a dropdown menu, make the button behave like a toggle switch:

Example

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Click me!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Seafood</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

Try It Yourself

showMe The variable starts as a boolean value false.

myFunc function by using !The (un)operator, which will showMe The variable is set to the opposite value of its current value.

$event object

You can set a variable to the opposite value of its current value when calling a function. $event The object is passed as a parameter.

$event The object contains the browser's event object:

Example

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Move the mouse over me!</h1>
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

Try It Yourself