Руководство AngularJS Event
View more Tutorials:
AngularJS является библитекой Javascript поэтому все способы обработки события Javascript могут быть применены в AngularJS. Но AngularJS предлагает новый способ, при возникновении события, будет вызван метод $scope вместо функции Javascript. Чтобы сделать это, AngularJS дает список готово построенных Directive:
- ng-blur
- ng-change
- ng-click
- ng-copy
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Примечание: Событие AngularJS не будет переписывать (overwrite) на событии HTML, оба будут выполнены, поэтому вам нужно рассмотреть при написании кода как ниже:
<!-- Both events are executed --> <button onclick="someFunction(event)" ng-click="someMethod($event)"> Click me! </button>
Когда пользователь двигает курсор по поверхности элемента, события произойдут по следующему порядку:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Когда пользователь click (кликнет) курсором на элемент, следующие события произойдут по порядку:
- ng-mousedown
- ng-mouseup
- ng-click
Пример с ng-mouseover, ng-mouseenter, ng-mousemove, ng-mouseleave:

mouseevent-example.html
<!DOCTYPE html> <html> <head> <title>AngularJS Mouse Events</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> <script src="mouseevent-example.js"></script> <style> .my-div { width: 290px; height: 100px; background: blue; } </style> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h3>Mouse Events (Over, Enter, Move, Leave)</h3> <div class="my-div" ng-mouseover ="mouseoverHandler($event)" ng-mouseenter ="mouseenterHandler($event)" ng-mousemove ="mousemoveHandler($event)" ng-mouseleave ="mouseleaveHandler($event)"> </div> <ol style="color:red;"> <li>Mouse Over: {{overCount}}</li> <li>Mouse Enter: {{enterCount}}</li> <li>Mouse Move: {{moveCount}}</li> <li>Mouse Leave: {{leaveCount}}</li> </ol> </div> </body> </html>
mouseevent-example.js
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.overCount = 0; $scope.enterCount = 0; $scope.moveCount = 0; $scope.leaveCount = 0; $scope.mouseoverHandler = function($event) { $scope.overCount += 1; } $scope.mouseenterHandler = function($event) { $scope.enterCount += 1; } $scope.mousemoveHandler = function($event) { $scope.moveCount += 1; } $scope.mouseleaveHandler = function($event) { $scope.leaveCount += 1; } });
Пример с ng-mousedown, ng-mouseup, ng-click:

mouseevent-example2.html
<!DOCTYPE html> <html> <head> <title>AngularJS Mouse Events</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> <script src="mouseevent-example2.js"></script> <style> .my-div { width: 290px; height: 100px; background: blue; } </style> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h3>Mouse Events (mousedown, mouseup, click)</h3> <div class="my-div" ng-mousedown ="mousedownHandler($event)" ng-mouseup ="mouseupHandler($event)" ng-click ="clickHandler($event)"> </div> <ol style="color:red;"> <li>Mouse Down: {{mousedownCount}}</li> <li>Mouse Up: {{mouseupCount}}</li> <li>Click: {{clickCount}}</li> </ol> </div> </body> </html>
mouseevent-example2.js
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.mousedownCount = 0; $scope.mouseupCount = 0; $scope.clickCount = 0; $scope.mousedownHandler = function($event) { $scope.mousedownCount += 1; } $scope.mouseupHandler = function($event) { $scope.mouseupCount += 1; } $scope.clickHandler = function($event) { $scope.clickCount += 1; } });