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.
- ng-blur
- ng-change
- ng-click
- ng-copy
- ng-cut
- ng-dbl-click
- ng-keydown
- ng-keyup
- ng-keypress
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- 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”>
—-code —–
</element>
AngularJS Event Listeners Example
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>
ngMousedown
The ngMouseDown directive allows us to specify the behavior of element(s) on mousedown event. This directive has highest priority.
Syntax
<ANY ELEMENT ng-mousedown=”expression”>
…
</ANY ELEMENT>
Example
HTML
<h4>ngMouseDown Example</h4>
<div ng-controller=”HomeController”>
<button ng-mousedown=”count = count + 1″ ng-init=”count=0″>
Mouse Down
</button>
<br /> Count of mouse down on above button: {{count}}
</div>
Controller
Here there is no specific item need to done in controller, hence I have defined blank controller.
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngMouseenter
The ngMouseenter directive allows us to specify the behavior of element(s) on mouse enter event. This directive has highest priority.
Syntax
<ANY ELEMENT ng-mouseenter=”expression”>
…
</ANY ELEMENT>
Example
HTML
<h4>ngMouseEnter Example</h4>
<div ng-controller=”HomeController”>
<div style=”width:150px;height:50px;background-color:gray” ng-mouseenter=”count = count + 1″ ng-init=”count=0″>
</div>
<br /> Count of mouse enter on above div object: {{count}}
</div>
Controller
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngMouseleave
The ngMouseleave directive allows us to specify the behavior of element(s) on mouse leave event. This directive has highest priority.
Example
HTML
<h4>ngMouseLeave Example</h4>
<div ng-controller=”HomeController”>
<div style=”width:150px;height:50px;background-color:gray” ng-mouseleave=”count = count + 1″ ng-init=”count=0″>
</div>
<br /> Count of mouse leave on above div object: {{count}}
</div>
Controller
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngMousemove
The ngMousemove directive allows us to specify the behavior of element(s) on mouse move event. This directive has highest priority.
Example
HTML:
<h4>ngMouseMove Example</h4>
<div ng-controller=”HomeController”>
<div style=”width:150px;height:50px;background-color:gray” ng-mousemove=”x=$event.screenX;y=$event.screenY” ng-init=”x=0;y=0;”>
</div>
<br /> X: {{x}}
<br /> Y: {{y}}
</div>
Controller
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngMouseover
The ngMouseover directive allows us to specify the behavior of element(s) on mouse over event. This directive has highest priority.
Example
HTML
<h4>ngMouseOver Example</h4>
<div ng-controller=”HomeController”>
<div style=”width:150px;height:50px;background-color:gray” ng-mouseover=”count = count + 1;” ng-init=”count=0″>
</div>
<br /> Count of mouse over on above div object: {{count}}
</div>
Controller
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngMouseup
The ngMouseup directive allows us to specify the behavior of element(s) on mouse up event. This directive has highest priority.
Example
HTML
<h4>ngMouseUp Example</h4>
<div ng-controller=”HomeController”>
<button ng-mouseup=”count = count + 1″ ng-init=”count=0″>
Mouse Up
</button>
<br /> Count of mouse Up on above button: {{count}}
</div>
Controller
var app = angular.module(“app”, []);
app.controller(“HomeController”, function ($scope) {
});
ngKeydown
Specify custom behavior on keydown event. This directive executes at priority level 0.
Usage
as attribute:
<ANY
ng-keydown=”expression”>
…
</ANY>
Arguments
ngKeydown – Expression to evaluate upon keydown. (Event object is available as $event and can be interrogated for keyCode, altKey, etc.)
Example
<input ng-keydown=”count = count + 1″ ng-init=”count=0″>
key down count: {{count}}
ngKeypress
Specify custom behavior on keypress event. This directive executes at priority level 0.
Usage
as attribute:
<ANY
ng-keypress=”expression”>
…
</ANY>
Arguments
ngKeypress – Expression to evaluate upon keypress. (Event object is available as $event and can be interrogated for keyCode, altKey, etc.)
Example
<input ng-keypress=”count = count + 1″ ng-init=”count=0″>
key press count: {{count}}
ngKeyup
Specify custom behavior on keyup event.
Usage
as attribute:
<ANY
ng-keyup=”expression”>
…
</ANY>
Arguments
ngKeyup – Expression to evaluate upon keyup. (Event object is available as $event and can be interrogated for keyCode, altKey, etc.)
Example
<p>Typing in the input box below updates the key count</p>
<input ng-keyup=”count = count + 1″ ng-init=”count=0″> key up count: {{count}}
<p>Typing in the input box below updates the keycode</p>
<input ng-keyup=”event=$event”>
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>
