Die Anleitung zu AngularJS Event
View more Tutorials:
AngularJS ist eine Bibliothek Javascript deshalb können alle Maßnahmen zur Event-Behandlung vom Javascript im AngularJS angewendet werden. Allerdings schlagt AngularJS den neuen Zugang vor. Wenn ein Event passiert, wird eine Methode vom $scope statt einer Funktion vom Javascript aufgeruft. Um das zu machen, gibt AngularJS eine Liste der eingebauten 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
Achtung: Ein Event vom AngularJS überschreibt (overwrite) auf das Event vom HTML nicht. Die beiden werden implementieren. So sollen Sie beim Kode-Schreiben wie folgend nachdenken:
<!-- Both events are executed --> <button onclick="someFunction(event)" ng-click="someMethod($event)"> Click me! </button>
Wenn der Benutzer durch die Oberfläche eines Element die Maus bewegt, werden die Events nach der folgenden Reihenfolge passieren:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Wenn der Benutzer die Mause auf dem Element klickt, werden die Events nach der Reihenfolge passieren:
- ng-mousedown
- ng-mouseup
- ng-click
Die Beispiele mit 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; } });
Die Beispiele mit 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; } });