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 lsbin 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：此示例显示了用于在Mouse Movement Event上调用函数的$ 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：这个例子显示了正在执行的动作点击时事件。在这里, 单击鼠标按钮将导致执行某些操作。

< !DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < p > Click on lsbin to increase the Total Count. < / p > < div ng-app = "App1" ng-controller = "Ctrl1" > < button ng-click = "count = count + 1" > Geeks for Geeks < / button > < 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 >

【AngularJS 事件介绍和用法详细介绍】输出如下：