As a web developer, we will have to deal with different DOM events like key press, mouse moves, mouse clicks and other change events. In this tutorial, we will look into the AngularJS Directives for handling these events with suitable examples.
Contents:
- Introduction to AngularJS Event Listener Directives
- AngularJS events example
Introduction to AngularJS Event Listener Directives
The following list shows the available AngularJS event listener directives for DOM events.
- ng-click
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-change
Usage
We can use above AngularJS event listener directives as an attribute of HTML element as shown below.
|
1 2 3 4 5 6 |
<ANY eventListenerDirective="expression"> .... .... </ANY> |
Here expression is evaluated on triggering each event.
AngularJS Events Example
The following example demonstrates the angularJS events. Directives like ngClick, ngFocus etc expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. The event object is also available for key events and can be used to get keyCode, altKey etc. values.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://www.journaldev.com/9042/mystyle.css"> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <b> ngClick Directive </b> <button class="btn1" ng-click="onClick($event)">Click Me! </button>{{ clicked }} <b> ngDblclick Directive </b> <button class="btn3" ng-dblclick="count = count + 1">Double Click!</button> {{ count }} <b> ngMousedown and ngMouseup Directive </b> <button class="btn1" ng-class="{green: down}" ng-mousedown="down = true" ng-mouseup="down = false"> Change Color</button> <b> ngMouseenter and ngMouseleave Directives </b> <button class="btn2" ng-class="{red: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">Toggle Colors</button> <b> ngMousemove Directive </b> <button class="btn2" ng-mousemove="moveCnt = moveCnt + 1" ng-init="moveCnt=0">Move Mouse</button> Moved {{moveCnt}} times. <b> ngkeyup Directive </b> Type something : <input class="txt" ng-keyup="keyupcount = keyupcount + 1" ng-init="keyupcount=0"> key up count: {{keyupcount}} <b> ngkeydown Directive </b> Type something : <input class="txt" ng-keydown="event=$event">event keyCode: {{ event.keyCode }} <b> ngChange Directive </b> Checked : <input type="checkbox" ng-model="checked"/> {{checked}} </div> </body> </html> |
The controller is created in the following file. You can see the use of $event object.
app.js
|
1 2 3 4 5 6 7 8 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.onClick = function(event){ $scope.clicked = "Clicked On X: "+event.clientX +" and Y: "+event.clientY; }; }); |
The following CSS styling is used in the example.
mystyle.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.btn1 { color: #FFF; background-color: #900; font-weight: bold; font-size : 20px; } .btn2 { color: #FFF; background-color: green; font-weight: bold; font-size : 20px; } .btn3 { color: #FFF; background-color: blue; font-weight: bold; font-size : 20px; } .txt { border: 1px solid red; } .red { background-color: red; } .green { background-color: green; } |
Now you can play with following output.
That’s all for now and we will see more angularJS features in upcoming tutorials.