概述
Angular JS對(duì)各種事件進(jìn)行了對(duì)應(yīng)指令的封裝，使其能夠更好的配合Angular JS使用。具有ng指令的事件：
| 事件 | 指令 | 說(shuō)明 |
|---|---|---|
| click | ng-click | 鼠標(biāo)左鍵單擊 |
| dblclick | ng-dblclick | 鼠標(biāo)左鍵雙擊 |
| mousedown | ng-mousedown | 鼠標(biāo)點(diǎn)下 |
| mouseup | ng-mouseup | 鼠標(biāo)彈起 |
| mouseover | ng-mouseover | 鼠標(biāo)位于上方 |
| mouseout | ng-mouseout | 鼠標(biāo)移出 |
| mousemove | ng-mousemove | 鼠標(biāo)移動(dòng) |
| mouseenter | ng-mouseenter | 鼠標(biāo)進(jìn)入 |
| mouseleave | ng-mouseleave | 鼠標(biāo)進(jìn)入 |
| keydown | ng-keydown | 鍵盤按下 |
| keyup | ng-keyup | 鍵盤彈起 |
| keypress | ng-keypress | 鍵盤按住 |
| submit | ng-submit | 提交 |
| focus | ng-focus | 獲得焦點(diǎn) |
| blur | ng-blur | 失去焦點(diǎn) |
| copy | ng-copy | 拷貝 |
| cut | ng-cut | 剪切 |
| paste | ng-paste | 粘貼 |
實(shí)現(xiàn)細(xì)節(jié)
所有的消息的ng指令都是采用統(tǒng)一的處理模式，就是監(jiān)聽對(duì)應(yīng)的消息，然后執(zhí)行綁定的數(shù)據(jù)。核心代碼為：
element.on(eventName, function(event) {
var callback = function() {
fn(scope, {$event:event});
};
if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
scope.$evalAsync(callback);
} else {
scope.$apply(callback);
}
});
樣例代碼
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<div>
<button ng-click="clickCount = clickCount + 1" ng-init="clickCount=0">
click {{clickCount}}
</button>
<button ng-dblclick="dbclickCount = dbclickCount + 1" ng-init="dbclickCount=0">
Double click {{dbclickCount}}
</button>
<button ng-mousedown="mdclickCount = mdclickCount + 1" ng-init="mdclickCount=0">
Mouse down {{mdclickCount}}
</button>
<button ng-mouseup="muclickCount = muclickCount + 1" ng-init="muclickCount=0">
Mouse up {{muclickCount}}
</button>
<button ng-mouseover="moclickCount = moclickCount + 1" ng-init="moclickCount=0">
Mouse over {{moclickCount}}
</button>
</div>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module('app', []);
</script>
</body>
</html>
