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 元素上时，增加计数变量:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
</body>
</html>

运行一下

ng-click 指令

ng-click 指令定义了点击元素时将执行的 AngularJS 代码。

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
</body>
</html>

运行一下

你也可以引用一个函数:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">点击一下!</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

如果希望在单击按钮时显示 HTML 代码的一部分，并在再次单击按钮时隐藏（如下拉菜单），请使按钮的行为类似于切换开关（Toggle）:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">点击一下!</button>
<div ng-show="showMe">
    <h2>Menu:</h2>
    <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>
<p>单击按钮以显示/隐藏菜单。</p>
</body>
</html>

运行一下

showMe 变量以布尔值 false 开始。

myFunc 函数通过使用 ! 操作符将 showMe 变量设置为与其相反的值。

$event 对象

调用函数时，可以将 $event 对象作为参数传递。

$event 对象包含浏览器的事件对象:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h2 ng-mousemove="myFunc($event)">鼠标放到这里!</h2>
<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>
<p>将鼠标悬停在标题上，以显示事件对象中 clientX 和 clientY 的值。</p>
</body>
</html>

运行一下

AngularJS 事件

AngularJS 事件

鼠标事件

实例

ng-click 指令

实例

实例

Toggle, True/False

实例

$event 对象

分类导航