AngularJS 事件

AngularJS 擁有自己的 HTML 事件指令。

AngularJS 事件

你可以通過使用以下一個或多個指令，將 AngularJS 事件監聽器添加到你的 HTML 元素中：

  • 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

事件指令允許我們在某些用戶事件上運行 AngularJS 函數。

AngularJS 事件不會覆蓋 HTML 事件，兩個事件都會被執行。

鼠標事件

當光標移動到元素上時，將按照以下順序發生鼠標事件：

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

或者，當鼠標點擊元素時，將按照以下順序觸發：

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

您可以在任何 HTML 元素上添加鼠標事件。

實例

當鼠標移動到 H1 元素上時，增加 count 變量：

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">鼠標移到我上方！</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

親自試一試

ng-click 指令

ng-click 指令定義了當元素被點擊時將執行的 AngularJS 代碼。

實例

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

親自試一試

你也可以引用一個函數：

實例

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

親自試一試

切換，真/假

如果你想在點擊按鈕時顯示一部分 HTML 代碼，并在再次點擊按鈕時隱藏，就像下拉菜單一樣，請使按鈕表現得像切換開關一樣：

點擊我

實例

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">點擊我！</button>  
<div ng-show="showMe">  
  <h1>菜單：</h1>  
  <div>披薩</div>  
  <div>意大利面</div>  
  <div>海鮮</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>

親自試一試

showMe 變量開始時為布爾值 false。

myFunc 函數通過使用 !（非）運算符，將 showMe 變量設置為與其當前值相反的值。

$event 對象

調用函數時可以將 $event 對象作為參數傳遞。

$event 對象包含瀏覽器的事件對象：

實例

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">鼠標移到我上方！</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>

親自試一試