Die Anleitung zu AngularJS Event
1. Die Überblick vom AngularJS Events
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>2. Mouse Events
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;
}
});