Tìm hiểu về AngularJS Events

AngularJS Event Listener

Có thể chia các events của AngularJS thành những loại:

• MOUSE EVENTS

  • ng-click
  • ng-dblclick
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover

• KEYBOARD EVENTS: Giống như với các sự kiện chuột, AngularJS cho chúng ta cách để xử lý các sự kiện bàn phím với khả năng sử dụng Dependency Injection với các đối số.

  • ng-keydown
  • ng-keypress
  • ng-keyup

• CHANGE EVENTS

  • ng-change

• OTHER EVENTS

  • ng-blur
  • ng-copy
  • ng-cut
  • ng-focus
  • ng-paste

Lưu ý: Các events cho phép chúng ta chạy các funtion AngularJS tại các sự kiện người dùng chỉ định.

Một event AngularJS sẽ không ghi đè lên một event HTML, cả hai event sẽ đều được thực thi.

Một vài ví dụ dễ hình dung

• ng-blur: Ví dụ như sẽ thực hiện một biểu thức khi input có sự chuyển hướng focus:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <input ng-blur="count = count + 1" ng-init="count=0" />
    <p>{{count}}</p>

• ng-keydown, ng-keypress, ng-keyup

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>

    <div ng-app="mainModule" ng-controller="mainController">
        <input type="text" ng-keydown="onKeyDown($event)" ng-keyup="onKeyUp($event)" ng-keypress="onKeyPress($event)" />

        <p>KEY DOWN: <b>{{onKeyDownResult}}</b></p>
        <p>KEY UP: <b>{{onKeyUpResult}}</b></p>
        <p>KEY PRESS: <b>{{onKeyPressResult}}</b></p>
    </div>

    <script>
    angular.module("mainModule", [])
      .controller("mainController", function ($scope)
      {
        // Initialization
        $scope.onKeyDownResult = "";
        $scope.onKeyUpResult = "";
        $scope.onKeyPressResult = "";

        var getMessage = function (keyEvent)
        {
          return "KeyCode - " + (window.event ? keyEvent.keyCode : keyEvent.which) + "";
        };

        // Event handlers
        $scope.onKeyDown = function ($event) {
          $scope.onKeyDownResult = getMessage($event);
        };

        $scope.onKeyUp = function ($event) {
          $scope.onKeyUpResult = getMessage($event);
        };

        $scope.onKeyPress = function ($event) {
          $scope.onKeyPressResult = getMessage($event);
        };
      });
    </script>

• ng-click: Một ví dụ đơn giản click vào button gọi funtion doClick() và làm việc bạn muốn, bạn cũng có thể truyền giá trị, biến vào hàm //doClick($$vent).

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
    <div ng-app="myApp" ng-controller="myCtrl">
       <button ng-click="myData.doClick()">Click here</button>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.myData = {};
        $scope.myData.doClick = function() {
            alert("Hello, World!");
        }
    });
    </script>

• ng-mousemove

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-mousemove="myFunc($event)">
            <img src="https://viblo.asia/uploads/images/ae335feaa22a947570f8d5bac3063dec9d3628b3/c19441269ac000c2bcf728ffd115cdc323509e1f.png" />
        </div>
        <p>Coordinates: {{message}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.myFunc = function(event) {
            $scope.message = event.clientX + ', ' + event.clientY;
        }
    });
    </script>