亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
收藏(0) 分享
AngularJS教程 / 事件

事件

AngularJS 事件

你可以通過使用以下一個或多個指令，將 AngularJS 事件監(jiān)聽器添加到你的 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 函數(shù)。

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

鼠標事件

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

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

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

  • 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 指令定義了當元素被點擊時將執(zhí)行的 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>
運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

你也可以引用一個函數(shù)：

實例

<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 代碼，并在再次點擊按鈕時隱藏，就像下拉菜單一樣，請使按鈕表現(xiàn)得像切換開關一樣：

點擊我

實例

<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 函數(shù)通過使用 !（非）運算符，將 showMe 變量設置為與其當前值相反的值。

$event 對象

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

$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>
運行實例 ?

點擊 "運行實例" 按鈕查看在線實例