Events

So far we did not cover how to handle events in AngularJS, which is something you really need in a serious application. With this tutorial you will learn how to handle events and what event-directives AngularJS provides to make your life easyer.

Introduction to event-directives

AngularJS allows you to use the event-directives on any HTML-elements, meaning you could use a ng-click-directive not only on a button, but also on div, span, etc. To follow the MVC-pattern correctly, the funtion handling the event is in a controller. Let’s look at a very simple events-example, which increases a counter by one when clicking on the ‘Click Me’ button.

Example

<div ng-app="" ng-controller="eventController">
    <p>Click-Counter: {{ clickCounter }} </p>
    <input type="button" ng-click="handleButtonClick()" value="Click Me" >
</div>

<script>
function eventController($scope) {
    $scope.clickCounter = 0;
    $scope.handleButtonClick = function() {
            $scope.clickCounter++;
        }
}
</script>

Play with example »

First you should look at ng-click-directive in the button. Its value is set to handleButtonClick(), meaning it shall call the corresponding-function in the eventController. When the handleButtonClick-function is called, the clickCounter-variable of the eventController is incremented by one. The clickCounter-variable is shown above in the {{ clickCounter }}-expression, which, thanks to the two-way-binding, gets updated as soon as an incrementation occures.

Available event-directives

Beside the ng-click-directive AngularJS provides us many more events which you can use in your application. As you can see from the list below, there are almost no limits.

  • ng-click
  • ng-copy
  • ng-cut
  • ng-dbl-click
  • ng-focus
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-paste
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Getting the source-event object with $event

There are times, when you need to know more about the event, which occured. You can get actually all informations like current-mouse state or the informations about the html-element currently click etc. In our next example I show you how you can get the text-value of a text-input, when you click it.

Example

<div ng-app="" ng-controller="eventController">
  <h2>AngularJS $event example</h2>
  <input type="text" ng-click="handleClick($event)" value="My Text" >
</div>

<script>
function eventController($scope) {
    $scope.handleClick = function(event) {
            alert(event.currentTarget.value);
        }
}
</script>

Play with example »

As you can see the example is quite simple. The text-input has a ng-click-directive, which calls the method handleClick(event) in the eventController. What is different is, that the method-call passes the $event-object into the method. The $event-object contains all event-informations. In our example the event.currentTarget contains the input. If you’re unsure what the $event-object contains, set a debugger within the handleClick-method and inspect it with your favorite javascript-debugging tool.