一、事件指令
先盜張圖，這個圖展示了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:允許爲不同大小和像素密度而指定多個圖片
好了，今天就到這吧！愚人節已經到了，祝大家節日快樂！早上起來以後記得多長點心眼，小心被耍！