AngularJS Events (ng-blur, ng-change, ng-click, ng-mouseover, ng-keypress, ng-copy, etc)

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.

AngularJS Events

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.

AngularJS Event Directives

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.

 

  1. ng-blur
  2. ng-change
  3. ng-click
  4. ng-copy
  5. ng-cut
  6. ng-dbl-click
  7. ng-keydown
  8. ng-keyup
  9. ng-keypress
  10. ng-mousedown
  11. ng-mouseup
  12. ng-mouseenter
  13. ng-mouseleave
  14. ng-mousemove
  15. ng-mouseover

Generally these angularjs events will not overwrite HTML events both events will execute separately.

Syntax of AngularJS Event Listeners

Following is the syntax of attaching event listeners to html elements in angularjs applications.

 

<element eventlistener="expression">

----your code -----

</element>

AngularJS Event Listeners Example

Following is the simple example to use event listeners like ng-mouseenter and ng-mouseleave in angularjs application.

 

Live Preview

<!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.

Output of AngularJS Events Example

Following is the result of using events in angularjs applications.

 

Angularjs mouseover, mouseleave events example result or output

AngularJS $event Object as Parameter

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.

AngularJS $event Object as Parameter 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.

 

Live Preview

<!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.

Output of AngularJS $event Object as Parameter

Following is the result of sending $event object as parameter to event listener directives in angularjs applications.

 

Angularjs send $event object as parameter to event listeners example output or result

AngularJS Event Directives with Parameters Example

In angularjs we can send multiple parameters to event directives. Following is the example of sending different parameters with event listeners in angularjs applications.

 

Live Preview

<!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.

Output of AngularJS Event Listeners with Parameters

Following is the result of sending multiple parameters to event listener directives in angularjs applications.

 

Angularjs Event Listener Directives with Multiple Parameters