openplanning

Hướng dẫn và ví dụ AngularJS Event

  1. Tổng quan AngularJS Events
  2. Mouse Events

1. Tổng quan AngularJS Events

AngularJS là một thư viện Javascript vì vậy tất cả các cách xử lý sự kiện của Javascript đều có thể áp dụng trong AngularJS. Tuy nhiên AngularJS đề xuất cách tiếp cận mới, khi sự kiện xẩy ra một phương thức của $scope sẽ được gọi thay vì một hàm của Javascript. Để làm được việc này AngularJS đưa ra một danh sách các Directive đã được xây dựng sẵn:
  • 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
Chú ý: Một sự kiện của AngularJS sẽ không viết đè (overwrite) lên sự kiện của HTML, cả hai sẽ cùng thực thi, vì vậy bạn cần cân nhắc khi viết code giống dưới đây:
<!-- Both events are executed -->
<button onclick="someFunction(event)" ng-click="someMethod($event)">
   Click me!
</button>

2. Mouse Events

Khi người dùng di chuyển con chuột ngang qua bề mặt của một phần tử, các sự kiện sẽ xẩy ra theo thứ tự dưới đây:
  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave
Khi người dùng click chuột vào phần tử, các sự kiện sau sẽ xẩy ra theo thứ tự:
  • ng-mousedown
  • ng-mouseup
  • ng-click
Ví dụ với 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;
    }
});
Ví dụ với 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;
    }
});