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

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

Các hướng dẫn AngularJS

Tổng quan AngularJS Events
Mouse Events

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:

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;
    }
});

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

Các hướng dẫn AngularJS