An Events in AngularJS can be used to perform particular tasks, based on the action taken. Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML Event. It can be added using the Directives mentioned below:
- ng-mousemove: The movement of the mouse leads to the execution of the event.
- ng-mouseup: Movement of the mouse upwards leads to the execution of the event.
- ng-mousedown: Movement of the mouse downwards leads to the execution of the event.
- ng-mouseenter: Click of the mouse button leads to the execution of the event.
- ng-mouseover: Hovering the mouse leads to the execution of the event.
- ng-cut: Cut operation leads to the execution of the event.
- ng-copy: Copy operation leads to the execution of the event.
- ng-keypress: Press of key leads to the execution of the event.
- ng-keyup: Press of upward arrow key leads to the execution of the event.
- ng-keydown: Press of downward arrow key leads to the execution of the event.
- ng-click: Single click leads to the execution of the event.
- ng-dblclick: Double click leads to the execution of the event.
- ng-blur: Fired when an HTML element loses its focus.
- ng-change: It is used whenever the value of an input element changes.
- ng-focus: It is used to apply custom behavior when an element is focused.
- ng-paste: It is used to specify custom behavior functions when the text in input fields is pasted into an HTML element.
- ng-mouseleave: It is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element.
Example 1: This example illustrates action on the occurrence of any Mouse Movement Event. This includes events of dragging the mouse to cause movement of the cursor on the screen.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ 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" >
GeeksforGeeks
</ 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 >
|
Output:
ng-mousemove Directive
Example 2: This example shows the $event obj for calling the function on Mouse Movement Event. Here, the $event object enables the occurrence of a mouse movement event.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< p >
Mouse over GeeksforGeeks to display
the value of clientX and clientY.
</ p >
< div ng-app = "App1"
ng-controller = "Ctrl1" >
< h1 ng-mousemove = "myFunc($event)" >
GeeksforGeeks
</ 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 >
|
Output:
ng-mousemove Directive
Example 3: This example shows the action being performed for On Click Event. Here, the click of the mouse button leads to the performance of some action.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< p >
Click on GeeksforGeeks to
increase the Total Count.
</ p >
< div ng-app = "App1"
ng-controller = "Ctrl1" >
< button ng-click = "count = count + 1" >
GeeksforGeeks
</ 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 >
|
Output:
ng-click Directive
Last Updated :
09 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...