AngularJS 事件详解
AngularJS 事件详解，AngularJS中的事件可以使用下面提到的指令添加：
- ng-mousemove：鼠标移动事件。
- ng-mouseup：鼠标向上移动事件。
- ng-mousedown：鼠标向下移动事件。
- ng-mouseenter：鼠标按钮的点击事件。
- ng-mouseover：鼠标悬停事件。
- ng-cut：剪切操作事件。
- ng-copy：复制操作事件。
- ng-keypress：按键事件。
- ng-keyup：按下向上箭头键会导致事件的执行。
- ng-keydown：按下向下箭头键会导致事件的执行。
- ng-click：单击导致事件的执行。
- ng-dblclick：双击导致事件的执行。
示例 1：鼠标移动事件。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<p>
Move the mouse over GeeksforGeeks
to increase the Total Count.
</p>
<div ng-app="App1" ng-controller="Ctrl1">
<h1 ng-mousemove="count = count + 1">
Geeks for Geeks
</h1>
<h2>Total Count:</h2>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('App1', []);
app.controller('Ctrl1', function ($scope) {
$scope.count = 0;
});
</script>
</body>
</html>输出：
示例 2：在鼠标移动事件上调用函数的 $event obj。$event 对象允许鼠标移动事件的发生。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<p>
Mouse over Geeks for Geeks to display
the value of clientX and clientY.
</p>
<div ng-app="App1" ng-controller="Ctrl1">
<h1 ng-mousemove="myFunc($event)">
Geeks for Geeks
</h1>
<h4>Coordinates: {{x + ', ' + y}}</h4>
</div>
<script>
var app = angular.module('App1', []);
app.controller('Ctrl1', function ($scope) {
$scope.myFunc = function (gfg) {
$scope.x = gfg.clientX;
$scope.y = gfg.clientY;
}
});
</script>
</body>
</html>输出：
示例 3：On Click事件。点击鼠标按钮执行事件。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
