AngularJS Events

AngularJS contains directives to raise different types of AngularJS events. The event listeners are passed as values to those event directives. Following are some of the most commonly used directives that generate AngularJS events.

  • ng-copy
  • ng-cut
  • ng-blur
  • ng-keypress
  • ng-keydown
  • ng-keyup
  • ng-mouseover
  • ng-mouseenter
  • ng-mouseleave
  • ng-mouseup
  • ng-mousemove
  • ng-paste
  • ng-click
  • ng-dblclick

Handling Mouse Events

Mouse events occur when a person enters mouse on some element, moves it and then leaves the element. Similarly, clicking a mouse on some element also raises an event. Take a look at the following example. Here we shall use “ng-mouseenter” directive to count number of times a mouse enters inside the boundaries of an element.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }    
</style>
</head>
<body>

    <div ng-app="EventApp" ng-controller="EventCtrl">

<div class="box" ng-mouseenter="num = num + 1">Enter Mouse here</div>

<h2>{{ num }}</h2>

</div>
<script>
var app = angular.module('EventApp', []);
app.controller('EventCtrl', function($scope) {
    $scope.num = 0;
});
</script>



</body>
</html>

Download the code Try the code

Open the above page in the browser. You should see a square blue box. This is basically a div. Underneath it, there should be number which should be zero when you open the page. Now move the mouse and enter it inside the blue box, the counter will increment to one. Take the mouse out and enter it again inside the blue box, the counter will update to two. Similarly, counter will increment every time you take the mouse inside the blue box. Now take a look at the code, here we have “listened” the mouse enter event on the div using “ng-mouseenter” directive. Inside the controller, we have defined a “num” variable. Every time we enter the mouse inside the boundaries of blue box, increment this num variable by one

Handling Events via Functions

In the last example we incremented the num inside the “ng-mouseenter” directive. In other words we passed variable increment code as a value to the directive. A better way is to encapsulate event handling code inside a function. Then pass this function to the event handler i.e. In the following example we shall handle mouse click event using a function that increments the counter by one. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }    
</style>
</head>
<body>

    <div ng-app="EventApp" ng-controller="EventCtrl">

<div class="box" ng-click="increment()">Click Mouse here</div>

<h2>{{ num }}</h2>

</div>
<script>
var app = angular.module('EventApp', []);
app.controller('EventCtrl', function($scope) {
    $scope.num = 0;
    $scope.increment = function() {
    $scope.num++;
    }
});
</script>



</body>
</html>

Download the code Try the code

Take a look at the code, here we have “listened” the mouse click event on the div using “ng-click” directive. Inside the controller, we have defined a “num” variable. Controller also contain a function “increment” which increments the num variable by one. Every time we click mouse inside the boundaries of blue box, increment() function is called and this num variable is increased by one

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .