AngularJS ng-mouseenter Event with Example

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.

AngularJS ng-mouseenter Event Directive

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.

Syntax of AngularJS 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.

Example of AngularJS ng-mouseenter Event

Following is the example to raise custom function whenever mouse pointer moved on input html element by using ng-mouseenter event in angularjs application.

 

Live Preview

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

Output of AngularJS ng-mouseenter Event Example

Following is the result of using ng-mouseenter event in angularjs applications.

 

Angularjs ng-mouseenter event example result

 

This is how we can use ng-mouseenter event in angularjs applications to raise events whenever mouse pointer / cursor enters an elements.