angularjs教程_AngularJS活动教程

angularjs教程

As a web developer, we will have to deal with different DOM events like key press, mouse moves, mouse clicks and other change events. In this tutorial, we will look into the AngularJS Directives for handling these events with suitable examples.

作为Web开发人员，我们将不得不处理不同的DOM事件，例如按键，鼠标移动，鼠标单击和其他更改事件。在本教程中，我们将通过适当的示例介绍用于处理这些事件的AngularJS指令。

内容： (Contents:)

Introduction to AngularJS Event Listener DirectivesAngularJS事件侦听器指令简介
AngularJS events exampleAngularJS事件示例

AngularJS事件侦听器指令简介 (Introduction to AngularJS Event Listener Directives)

The following list shows the available AngularJS event listener directives for DOM events.

以下列表显示了DOM事件的可用AngularJS事件侦听器指令。

ng-clickng-点击
ng-dblclickng-dblclick
ng-keydownng-keydown
ng-keypressng键
ng-keyupng-keyup
ng-mousedownng-mousedown
ng-mouseenterng-mouseenter
ng-mouseleaveng-mouseleave
ng-changeng-change

用法 (Usage)

We can use above AngularJS event listener directives as an attribute of HTML element as shown below.

我们可以将上面的AngularJS事件侦听器指令用作HTML元素的属性，如下所示。

<ANY eventListenerDirective="expression">
....
....
</ANY>

Here expression is evaluated on triggering each event.

这里， 表达式是在触发每个事件时进行评估的。

AngularJS事件示例 (AngularJS Events Example)

The following example demonstrates the angularJS events. Directives like ngClick, ngFocus etc expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. The event object is also available for key events and can be used to get keyCode, altKey etc. values.

以下示例演示了angularJS事件。诸如ngClick ， ngFocus等指令在该表达式的范围内公开了$event对象。当存在jQuery或类似的jqLite对象时，该对象是jQuery事件对象的实例。事件对象也可用于键事件，并可用于获取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"><b> ngClick Directive </b><button class="btn1" ng-click="onClick($event)">Click Me! </button>{{ clicked }}<b> ngDblclick Directive </b><button class="btn3" ng-dblclick="count = count + 1">Double Click!</button> {{ count }}<b> ngMousedown and ngMouseup Directive </b><button class="btn1" ng-class="{green: down}" ng-mousedown="down = true" ng-mouseup="down = false"> Change Color</button><b> ngMouseenter and ngMouseleave Directives </b><button class="btn2" ng-class="{red: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">Toggle Colors</button><b> ngMousemove Directive </b><button class="btn2" ng-mousemove="moveCnt = moveCnt + 1" ng-init='moveCnt=0'>Move Mouse</button> Moved {{moveCnt}} times.<b> ngkeyup Directive </b>Type something : <input class="txt" ng-keyup="keyupcount = keyupcount + 1" ng-init="keyupcount=0"> key up count: {{keyupcount}}<b> ngkeydown Directive </b>Type something :<input class="txt" ng-keydown="event=$event">event keyCode: {{ event.keyCode }}<b> ngChange Directive </b>Checked :<input type="checkbox" ng-model="checked"/> {{checked}}
</div></body>
</html>

The controller is created in the following file. You can see the use of $event object.

在以下文件中创建控制器。您可以看到$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;};
});

The following CSS styling is used in the example.

本示例中使用以下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;
}

Now you can play with following output.

现在您可以播放以下输出。

演示地址

That’s all for now and we will see more angularJS features in upcoming tutorials.

到此为止，我们将在接下来的教程中看到更多angularJS功能。

翻译自: https://www.journaldev.com/9042/angularjs-events-tutorial

angularjs教程