Le Tutoriel de AngularJS Event

View more Tutorials:

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 :
  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. ng-mouseleave
Lorsqu'un utilisateur  click sur un élément, les événement seront produisent dans l'ordre comme ci-dessous :
  1. ng-mousedown
  2. ng-mouseup
  3. 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;
    }
});

View more Tutorials: