AngularJS教程

更新时间2025-08-11

DOM 表单

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

DOM 表单

相关视频

免费