AngularJS为我们定义了一系列事件指令，方便我们对用户的操作作出响应。甚至他还有一个可选模块提供了触摸事件和手势事件的支持，为移动端开发提供了可能。现在开始学习一下AngularJS的事件指令。
一、事件指令
先盗张图，这个图展示了AngularJS中定义的事件指令，下面来做一些测试。
| 指令 | 作用 | 描述 |
| ng-blur | 属性、类 |
对blur事件指定自定义行为，在元素失去焦点时被触发 |
| ng-change | 属性、类 |
对change事件指定自定义行为，在表单元素的内容状态发生变化 时被触发（例如复选框被选中、输入框元素中的文本被修改等等） |
| ng-click | 属性、类 | 为click事件指定自定义行为，在用户点击鼠标/光标时被触发 |
|
ng-copy ng-cut ng-paste |
属性、类 | 为copy、cut和paste事件指定自定义行为 |
| ng-dbclick | 属性、类 | 为dbclick事件指定自定义行为，在用户双击鼠标/光标时被触发 |
| ng-focus | 属性、类 | 为focus事件指定自定义行为，在元素获得焦点时被触发 |
|
ng-keydown ng-keypress ng-keyup |
属性、类 |
为keydown、keyup、keypress事件指定自定义行为， 在用户按下、释放某个案件时被触发 |
|
ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mousemove ng-mouseover ng-mouseup |
属性、类 |
为6个标准鼠标事件（mousedown、mouseenter、mouseleave、 mousemove、mouseover和mouseup）指定自定义行为， 在用户使用鼠标、光标与元素发生交互时被触发 |
|
ng-submit |
属性、类 |
为submit事件指定自定义行为，在表单被提交时触发 |
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>event</title> <style type="text/css"> </style> </head> <body ng-controller="eventCtrl"> <h1 ng-click="doClick($event)" ng-mousedown="doMousedown($event)" ng-mouseup="doMouseup($event)"> 点我试试看 </h1> <h1 ng-mouseleave="doMouseleave($event)" ng-mouseenter="doMouseenter($event)" ng-mouseover="doMouseover($event)"> 鼠标移入移出 </h1> <div> <input type="text" name="" ng-keydown="dokeydown($event)" ng-keyup="dokeyup($event)" ng-keypress="dokeypress($event)"
ng-focus="dofocus($event)" ng-blur="doblur($event)"> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('eventCtrl',function($scope){ $scope.doClick = function(e){ console.log(e); console.log("clicked!"); } $scope.doMousedown = function(e){ console.log(e); console.log("mousedown!"); } $scope.doMouseup = function(e){ console.log(e); console.log("mouseup!"); } $scope.doMouseleave = function(e){ console.log(e); console.log("mouseleave!"); } $scope.doMouseenter = function(e){ console.log(e); console.log("mouseenter!"); } $scope.doMousemove = function(e){ console.log(e); console.log("mousemove!"); } $scope.doMouseover = function(e){ console.log(e); console.log("mouseover!"); } $scope.dokeydown = function(e){ console.log(e); console.log("keydown!"); } $scope.dokeyup = function(e){ console.log(e); console.log("keyup!"); } $scope.dokeypress = function(e){ console.log(e); console.log("keypress!"); } $scope.dofocus = function(e){ console.log(e); console.log("focus!"); } $scope.doblur = function(e){ console.log(e); console.log("blur!"); } }) </script> </body> </html>
我们以click事件对象为例看看Angular的事件对象和普通事件对象有没有区别，代码如下：
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>event</title> <style type="text/css"> </style> </head> <body ng-controller="eventCtrl"> <h1 id="h" ng-click="doClick($event)"> 点我试试看 </h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('eventCtrl',function($scope){ $scope.doClick = function(e){ console.log("from angular clicked!"); console.log(e); } }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event</title> <style type="text/css"> </style> </head> <body ng-controller="eventCtrl"> <h1 id="h"> 点我试试看 </h1> <script type="text/javascript"> var h = document.getElementById("h"); h.addEventListener("click",function(e){ console.log("not from Angular"); console.log(e); }); </script> </body> </html>
结果我们得到的事件对象为：（左边是普通的，右边是Angular的）
从上图可以看到，Angular并没有对事件对象做什么改装，还是原来那个事件对象，还是熟悉的味道！ 基于这样的结论，可以认为处理Angular事件和处理普通事件完全一样（这个理论后来被人称作大～熊第一定律）。
一些管理属性的指令
主要有这些
ng-checked：管理checked属性
ng-disabled：管理disabled属性
ng-open：管理open属性，details上的
ng-readonly：管理readonly属性
ng-selected：管理selected属性
ng-href：为a设置href属性
ng-src：为img设置src属性
ng-srcset:允许为不同大小和像素密度而指定多个图片
好了，今天就到这吧！愚人节已经到了，祝大家节日快乐！早上起来以后记得多长点心眼，小心被耍！