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

Cập nhật lần cuối: 23/09/2023 lúc 16:01:10

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).

Liên quan: [AngularJS] Phần 13: Select/Dropdown trong AngularJS

Đố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ài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 16: Sự kiện AngularJS. https://www.dammio.com/2017/05/18/angularjs-phan-16-su-kien-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 16: Sự kiện AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/05/18/angularjs-phan-16-su-kien-angularjs}, urldate = {2024-12-06} }

Kết nối