[AngularJS] Phần 16: Sự kiện AngularJS

158 lượt xem

AngularJS có các chỉ thị sự kiện HTML riêng. Bạn có thể thêm các listener sự kiện Angular vào các phần tử HTML bằng cách dùng 1 trong các chỉ thị sau:

  • 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

Các chỉ thị sự kiện cho phép chạy các hàm AngularJS ở các sự kiện người dùng nhất định. Một sự kiện AngularJS sẽ không ghi đè một sự kiện HTML mà là cả hai cùng thực thi.

Sự kiện chuột
Các sự kiện chuột xảy ra khi con chuột di chuyển lên 1 phần tử, theo thứ tự sau:

  • ng-mouseenter
  • ng-mouseover
  • ng-mousemove
  • ng-mouseleave

Hoặc khi nút chuột được nhấn trên 1 phần tử, theo thứ tự:

  • ng-mousedown
  • ng-mouseup
  • ng-click

Bạn có thể thêm sự kiện chuột ở bất kỳ phần tử HTML nào. Ví dụ sau đếm số lần di chuyển chuột lên dòng chữ trong thẻ h1 với sự kiện ng-mousemove.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Rê chuột lên đây --- dammio.com</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script> 

</body>
</html>

Chỉ thị ng-click
Chỉ thị này định nghĩa mã AngularJS được thực thi khi phần tử được nhấn. Ví dụ sau tạo 1 nút nhấn khi người dùng nhấn lên nút này thì giá trị đếm (count) sẽ tăng 1 đơn vị và xuất ra màn hình.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Nhấn vào đây! --- dammio.com</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script> 

</body>
</html>

Ngoài cách trên, bạn cũng có thể viết 1 hàm để thực hiện việc đếm số lần kích chuột.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Nhấn chuột vào đây! --- dammio.com</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
});
</script> 

</body>
</html>

Toggle, True/False
Nếu bạn muốn hiển thị 1 phần mã HTML khi nhấn chuột, và ẩn khi nút được nhấn trở lại, giống 1 menu dropdown, bạn hãy tạo 1 nút có hành vi như 1 toggle như ví dụ sau.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Nhấn chuột vào đây! --- dammio.com</button>

<div ng-show="showMe">
    <h1>Thực đơn:</h1>
    <div>Trứng luộc</div>
    <div>Gà chiên</div>
    <div>Canh chua</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = !$scope.showMe;
    }
});
</script>

<p>Nhấn chuột vào nút để ẩn/hiện thực đơn món ăn.</p>

</body>
</html>

Biến showMe bắt đầu với giá trị kiểu bool là false. Hàm myFunc thiết lập biến showMe có 2 giá trị qua lại true và false với toán tử ! (phủ định).

Đối tượng $event
Bạn có thể đẩy đối tượng $event như là 1 đối khi gọi hàm. Dựa vào đối tượng $event bạn có thể lấy giá trị từ trình duyệt khi phát sinh các sự kiện. Ví dụ là sử dụng đối tượng $event để lấy tọa độ chuột.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Rê chuột lên đây!</h1>

<p>Tọa độ chuột: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myFunc = function(myE) {
        $scope.x = myE.clientX;
        $scope.y = myE.clientY;
    }
});
</script> 

<p>Rê chuột lên đoạn văn bản để hiển thị tọa độ của X và Y.</p>

</body>
</html>

Kết luận: Như vậy bài viết đã cung cấp cho các bạn kiến thức về sự kiện AngularJS, hi vọng các bạn tìm hiểu thêm để có thể phát triển các tương tác với trình duyệt tốt hơn.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz