Here we will learn events in angularjs with example, different types of event listeners in angularjs, how to attach event listeners to html elements in angularjs, send $event object as parameter to event listeners in angularjs and send multiple parameters to event listeners in angularjs.
Generally while developing applications we use different type of html DOM events like mouse clicks, key press, change events, etc likewise angularjs is having its own event directives for DOM interactions.
In angularjs we have different type of DOM event listener directives are available and we can attach those events to html elements. Following are the different type of event listeners in angularjs.
Generally these angularjs events will not overwrite HTML events both events will execute separately.
Following is the syntax of attaching event listeners to html elements in angularjs applications.
<element eventlistener="expression">
----your code -----
</element>
Following is the simple example to use event listeners like ng-mouseenter and ng-mouseleave in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Events Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style type="text/css">
.divstyle {
padding:20px;
border:1px solid black;
width:30%;
font-weight:bold;
background-color:#2b8bc0;
color:White;
}
.mousestyle {
background-color:#f2672e;
}
</style>
</head>
<body>
<div ng-app="">
<h2>AngularJs Events Example</h2>
<div class="divstyle" ng-class="{mousestyle: param1}" ng-mouseenter="param1 = true" ng-mouseleave="param1 = false">
Changing Colors on Mouse Hover and Mouse Leave
</div>
</div>
</body>
</html>
If you observe above code we used two events ng-mouseenter, ng-mouseleave and these events will fire whenever we hover and leave from the div element. Now we will run and see the output of above example.
Following is the result of using events in angularjs applications.
In angularjs we can send $event object as parameter while calling functions with event listener directives. The $event variable contains original browser event object. We will see how to send $event object as parameter to angularjs event directives with example.
In angularjs we can send $event object as parameter to event listeners. Following is the example of sending $event object as parameter to the functions which is calling with event listener directives.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs $event Object as Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('eventsApp', []);
app.controller('eventsCtrl', function ($scope) {
$scope.getdetails = function (eveparam) {
$scope.result = "Your Clicked on Coordinates X: " + eveparam.clientX + " and Y: " + eveparam.clientY;
}
});
</script>
<style type="text/css">
.divstyle {
padding:20px;
border:1px solid black;
width:30%;
font-weight:bold;
background-color:#2b8bc0;
color:White;
cursor:pointer;
}
</style>
</head>
<body>
<div ng-app="eventsApp" ng-controller="eventsCtrl">
<h2>AngularJs $event Object as Parameter Example</h2>
<div class="divstyle" ng-click="getdetails($event)">
Click on this Div We will show Coordinates Where you clicked
</div><br />
<span style="color:Red">{{result}}</span>
</div>
</body>
</html>
If you observe above example in ng-click event we are sending $event object as parameter and getting coordinates of position wherever we clicked on div.
Following is the result of sending $event object as parameter to event listener directives in angularjs applications.
In angularjs we can send multiple parameters to event directives. Following is the example of sending different parameters with event listeners in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Events Listeners with Parameters Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('eventsApp', []);
app.controller('eventsCtrl', function ($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Suresh"
}, {
"userid": 2,
"name": "Rohini"
}, {
"userid": 3,
"name": "Praveen"
}];
$scope.getdetails = function (event,item) {
$scope.result = "Your Clicked on "+item.name+" Coordinates X: " + event.clientX + " and Y: " + event.clientY;
}
});
</script>
<style type="text/css">
ul li {
cursor:pointer;
}
</style>
</head>
<body>
<div ng-app="eventsApp" ng-controller="eventsCtrl">
<h2>AngularJs Events with Parameters Example</h2>
<ul>
<li ng-repeat="user in arrlist" ng-click="getdetails($event,user)">
{{ user.name }}
</li>
</ul>
<span style="color:Red">{{result}}</span>
</div>
</body>
</html>
If you observe above example we are sending multiple parameters $event, user list as parameters to event listener ng-click. Now we will run and see the output that would be like as shown below.
Following is the result of sending multiple parameters to event listener directives in angularjs applications.
