AngularJS دستورالعمل‌های رویداد HTML خود را دارد.

رویدادهای AngularJS

شما می‌توانید با استفاده از یکی از این دستورالعمل‌ها یا چندین دستورالعمل، شنونده رویداد AngularJS را به عنصر HTML خود اضافه کنید:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

دستورالعمل واقعه اجازه می‌دهد که ما توابع AngularJS را بر روی برخی از رویدادهای کاربر اجرا کنیم.

AngularJS 事件不会覆盖 HTML 事件，两个事件都会被执行。

鼠标事件

当光标移动到元素上时，将按照以下顺序发生鼠标事件：

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

或者，当鼠标点击元素时，将按照以下顺序触发：

• ng-mousedown
• ng-mouseup
• ng-click

您可以在任何 HTML 元素上添加鼠标事件。

مثال

当鼠标移动到 H1 元素上时，增加 count 变量：

<div ng-app="myApp" ng-controller="myCtrl">  
鼠标移到我上方！
  
{{ count }}
  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

به طور مستقیم امتحان کنید

ng-click 指令

ng-click 指令定义了当元素被点击时将执行的 AngularJS 代码。

مثال

<div ng-app="myApp" ng-controller="myCtrl">
Click me!
{{ count }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

به طور مستقیم امتحان کنید

你也可以引用一个函数：

مثال

<div ng-app="myApp" ng-controller="myCtrl">
Click me!
{{ count }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

به طور مستقیم امتحان کنید

切换，真/假

如果你想在点击按钮时显示一部分 HTML 代码，并在再次点击按钮时隐藏，就像下拉菜单一样，请使按钮表现得像切换开关一样：

مثال

<div ng-app="myApp" ng-controller="myCtrl">  
点击我！  
  
  
菜单：
  
  
披萨
  
  
意大利面
  
  
海鲜
  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

به طور مستقیم امتحان کنید

showMe 变量开始时为布尔值 false.

myFunc تابع را با استفاده از !عملگر (non-)، که showMe مقدار متغیر را به مقدار مخالف آن تنظیم کنید.

$event عناصر

در هنگام فراخوانی تابع می‌توان $event عنصر به عنوان پارامتر ارسال می‌شود.

$event این شیء شامل شیء رویداد مرورگر است:}}

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">موش به بالای من حرکت کنید!</h1>
<p>مختصات: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

به طور مستقیم امتحان کنید