Cодержание

Руководство AngularJS Event

View more Tutorials:

1- Обзор AngularJS Events

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>

2- Mouse Events

Когда пользователь двигает курсор по поверхности элемента, события произойдут по следующему порядку:
  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. ng-mouseleave
Когда пользователь  click (кликнет) курсором на элемент, следующие события произойдут по порядку:
  1. ng-mousedown
  2. ng-mouseup
  3. 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;
    }
});

View more Tutorials: