Here we will learn ng-mouseenter event directive in angularjs, use of ng-mouseeneter event in angularjs and raise or call custom events whenever mouse curosr or pointer moved on html elements using ng-mouseenter event in angularjs applications with example.
In angularjs ng-mouseenter event directive is used to raise or call events / functions whenever mouse cursor or pointer enters on html elements.
The ng-mouseenter event in angularjs will fire whenever our mouse cursor enters an element and execute custom events / functions based on our requirements.
Suppose in angularjs application if you want to execute custom events / functions whenever mouse cursor moved on html elements then it’s better to use ng-mouseenter event.
Following is the syntax of using angularjs ng-mouseenter event directive in applications.
<element ng-mouseenter="expression">
--Your Code--
</element>
In angularjs whenever mouse pointer or cursor moved on html elements ng-mouseenter event will fire and execute expression and it will support all html elements.
The angularjs ng-mouseenter event will not override onmouseenter event of html elements both will execute separately.
Following is the example to raise custom function whenever mouse pointer moved on input html element by using ng-mouseenter event in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-mouseenter Event with 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('ngmouseenterApp', []);
app.controller('ngmouseenterCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngmouseenterApp" ng-controller="ngmouseenterCtrl">
<h2>AngularJS ng-mouseenter Event Example</h2>
<input type="button" ng-mouseenter="getdetails()" value="Bring Mouse Cursor Here"><br /><br />
<span style="color:Red">No. of Times MouseEnter Event Fired: {{count}}</span>
</div>
</body>
</html>If you observe above angularjs ng-mouseenter event example we are calling function getdetails() and showing number of times mouseenter event fired in application.
Following is the result of using ng-mouseenter event in angularjs applications.
This is how we can use ng-mouseenter event in angularjs applications to raise events whenever mouse pointer / cursor enters an elements.