openplanning

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

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

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:
  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. 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ự:
  1. ng-mousedown
  2. ng-mouseup
  3. 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;
    }
});

Xem thêm các chuyên mục: