AngularJS: Event trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

AngularJS cũng có những chỉ thị sự kiện HTML của nó.

Các sự kiện trong AngularJS

Ta có thể thêm sự kiện AngularJS để "lắng nghe - listener" các phần tử HTML bằng cách sử dụng những chỉ thị sau đây:

  • 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ỉ thị sự kiện cho phép ta chạy các hàm AngularJS tại chính sự kiện của người dùng.

Mỗi sự kiện AngularJS sẽ không được viết đè vào sự kiện HTML, khi đó cả hai sự kiện sẽ phải được thực thi.

Sự kiện chuột

Sự kiện chuột xảy ra khi con trỏ di chuyển over một phần tử HTML theo thứ tự như sau:

  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. ng-mouseleave

Hoặc khi nhấn một nút nào đó của chuột vào phần tử theo trình tự:

  1. ng-mousedown
  2. ng-mouseup
  3. ng-click

Ta có thể thêm các sự kiện chuột trên bất kỳ phần tử HTML nào.

Ví dụ:

Tăng biến đếm khi di chuyển chuột over phần tử H1:

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

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

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

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

Chỉ thị ng-click

Chỉ thị ng-click sẽ định nghĩa đoạn mã AngularJS mà sẽ được thực thi khi phần từ được nhấn (click).

Ví dụ:

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

<button ng-click="count = count + 1">Click me!</button>

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

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

Ta cũng có thể tham chiếu đến một hàm thay vì thực thi trực tiếp.

Ví dụ:

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

<button ng-click="myFunction()">Click me!</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>

Toggle, True/False

Nếu bạn hiện một phần mã lệnh HTML khi nhấn chuột và ẩn khi chuột lần nữa giống như dropdown thì ta sử dụng toggle:

Ví dụ

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

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</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>

Biến showMe sẽ được khởi gán giá trị ban đầu là false.

Hàm myFunc thiết lập biến showMe ngược với giá trị biến đang chứa bằng cách sử dụng toán tử ! (not).

Đối tượng $event

Bạn có thể truyền đối tượng $event như là một đối số khi gọi hàm.

Đối tượng $event chứa đối tượng sự kiện của trình duyệt:

Ví dụ

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

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{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>

» Tiếp: Form trong AngularJS
« Trước: DOM HTML trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!