AngularJS事件
时间：2020-01-09 10:34:01 来源:igfitidea点击:
AngularJS事件处理简介
创建更高级的AngularJS应用程序时，应用程序迟早需要处理DOM事件，例如鼠标单击，移动，键盘按下，更改事件等。AngularJS有一个简单的模型，用于将事件侦听器添加到从视图生成的HTML 。本文将解释此模型。
在深入探讨事件之前，让我向我们展示一个简单的AngularJS应用程序，我们将以该文本示例为基础：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
} );
</script>
</body>
</html>
AngularJS事件侦听器指令
我们可以使用AngularJS事件监听器指令之一将事件监听器添加到HTML元素：
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
AngularJS事件侦听器示例
这是一个简单的AngularJS事件侦听器指令示例：
<div ng-controller="MyController" >
<div ng-click="myData.doClick()">Click here</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.doClick = function() {
alert("clicked");
}
} );
</script>
当我们单击上面示例的内部div时，将调用myData.doClick()函数。如我们在控制器函数中看到的那样，myData对象添加了一个doClick()函数。
如我们所见，将事件添加到HTML DOM元素与首先生成HTML并没有太大区别。调用的事件侦听器函数是由控制器函数添加到$ scope对象中的函数。
事件监听器指令有一个名为$ event的特殊变量，我们可以将其用作事件监听器函数的参数。 $ event变量包含原始的浏览器事件对象。这是一个例子：
<div ng-controller="MyController" >
<div ng-click="myData.doClick($event)">Click here</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.doClick = function(event) {
alert("clicked: " + event.clientX + ", " + event.clientY);
}
} );
</script>
我们还可以将其他参数传递给事件侦听器函数。这是一个将事件侦听器功能添加到li元素列表中的示例：
<div ng-controller="MyController" >
<ul>
<li ng-repeat="item in myData.items"
ng-click="myData.doClick(item, $event)">Click here</li>
</ul>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [{ v: "1"}, { v: "2"}, { v : "3"} ];
$scope.myData.doClick = function(item, event) {
alert("clicked: " + item.v + " @ " + event.clientX + ": " + event.clientY);
}
} );
</script>
这个例子遍历一个项目列表，从它们中生成li元素，并向每个li元素添加点击监听器。随同对点击侦听器的调用一起传递了" item" JavaScript对象，并基于" click"对象($ event)生成了" li"元素所基于的对象。
