Le Tutoriel de AngularJS Event
1. Vue d'ensemble sur AngularJS Events
AngularJS est une bibliothèque Javascript donc tous les manière de gestion du Javascript peuvent appliquer au AngularJS. Pourtant, le AngularJS propose une nouvelle approche. Lorsqu'un événement se déroule, une méthode de $scope sera appelée au lieu d'appeler une fonction de Javascript. Pour le faire, le AngularJS fournit une liste des Directive contruits disponibles :
- 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
Remarque : Un événement de AngularJS ne sera pas écrasé (overwrite) sur l'événement de HTML. Tous les deux seront exécutés donc vous devez considérer lorsque vous écrivez des codes comme ci-dessous :
<!-- Both events are executed -->
<button onclick="someFunction(event)" ng-click="someMethod($event)">
Click me!
</button>2. Mouse Events
Lorsqu'un utilisateur déplace la souris sur la surface d'un élément, les événements se produisent dans l'ordre suivant :
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Lorsqu'un utilisateur click sur un élément, les événement seront produisent dans l'ordre comme ci-dessous :
- ng-mousedown
- ng-mouseup
- ng-click
L'exemple avec 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;
}
});L'exemple avec 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;
}
});