AngularJS事件教程
时间：2020-02-23 14:29:34 来源:igfitidea点击:
作为Web开发人员，我们将不得不处理不同的DOM事件，例如按键，鼠标移动，鼠标单击和其他更改事件。
在本教程中，我们将通过适当的示例介绍用于处理这些事件的AngularJS指令。
内容：
- AngularJS事件侦听器指令简介
- AngularJS事件示例
AngularJS事件侦听器指令简介
以下列表显示了DOM事件的可用AngularJS事件侦听器指令。
- ng-click
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-change
用法
我们可以将上面的AngularJS事件侦听器指令用作HTML元素的属性，如下所示。
<ANY eventListenerDirective="expression"> .... .... </ANY>
其中表达式是在触发每个事件时求值的。
AngularJS事件示例
以下示例演示了angularJS事件。
诸如ngClick和ngFocus等指令在该表达式的范围内公开了$event对象。
当存在jQuery时，该对象是jQuery事件对象的实例，或者是类似的jqLite对象。
事件对象也可用于键事件，并可用于获取keyCode，altKey等值。
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
ngClick Directive
<button class="btn1" ng-click="onClick($event)">Click Me! </button>{{ clicked }}
ngDblclick Directive
<button class="btn3" ng-dblclick="count = count + 1">Double Click!</button> {{ count }}
ngMousedown and ngMouseup Directive
<button class="btn1" ng-class="{green: down}" ng-mousedown="down = true" ng-mouseup="down = false"> Change Color</button>
ngMouseenter and ngMouseleave Directives
<button class="btn2" ng-class="{red: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">Toggle Colors</button>
ngMousemove Directive
<button class="btn2" ng-mousemove="moveCnt = moveCnt + 1" ng-init='moveCnt=0'>Move Mouse</button> Moved {{moveCnt}} times.
ngkeyup Directive
Type something :
<input class="txt" ng-keyup="keyupcount = keyupcount + 1" ng-init="keyupcount=0"> key up count: {{keyupcount}}
ngkeydown Directive
Type something :
<input class="txt" ng-keydown="event=$event">event keyCode: {{ event.keyCode }}
ngChange Directive
Checked :
<input type="checkbox" ng-model="checked" {{checked}}
</div>
</body>
</html>
在以下文件中创建控制器。
您可以看到$event对象的使用。
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.onClick = function(event){
$scope.clicked = "Clicked On X: "+event.clientX +" and Y: "+event.clientY;
};
});
在示例中使用以下CSS样式。
mystyle.css
.btn1 {
color: #FFF;
background-color: #900;
font-weight: bold;
font-size : 20px;
}
.btn2 {
color: #FFF;
background-color: green;
font-weight: bold;
font-size : 20px;
}
.btn3 {
color: #FFF;
background-color: blue;
font-weight: bold;
font-size : 20px;
}
.txt {
border: 1px solid red;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
