Definition- AngularJS allows you to handle events, such as mouse clicks, button presses, and key presses, using directives. Directives are special attributes that you can add to HTML elements to bind behavior to them. AngularJS provides several built-in directives for handling events, such as ng-click and ng-keypress.
Types of Events-
| AngularJS Event | Usage | Code Snippet |
|---|---|---|
| ng-click | Handles the click event on an element. | <button ng-click="doSomething()">Click me</button> |
| ng-blur | Handles the blur event when an element loses focus. | <input type="text" ng-blur="doSomething()"> |
| ng-change | Handles the change event when the value of an input, select or textarea element changes. | <input type="text" ng-change="doSomething()"> |
| ng-submit | Handles the submit event when a form is submitted. | <form ng-submit="submitForm()">...</form> |
| ng-keydown | Handles the keydown event when a key is pressed down on an element. | <input type="text" ng-keydown="doSomething($event)"> |
| ng-mousedown | Handles the mousedown event when the mouse button is pressed down on an element. | <div ng-mousedown="doSomething()">...</div> |
| ng-mouseup | Handles the mouseup event when the mouse button is released on an element. | <div ng-mouseup="doSomething()">...</div> |
| ng-mouseenter | Handles the mouseenter event when the mouse enters an element. | <div ng-mouseenter="doSomething()">...</div> |
| ng-mouseleave | Handles the mouseleave event when the mouse leaves an element. | <div ng-mouseleave="doSomething()">...</div> |
Now look on code example –
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<button ng-click="myFunction($event)">Click me!</button>
<p ng-show="clicked">Button was clicked!</p>
<script>
function MyController($scope) {
$scope.clicked = false;
$scope.myFunction = function(event) {
$scope.clicked = true;
event.preventDefault();
};
}
</script>
<div ng-controller="MyController">
{{message}}
</div>
</body>
</html>
Core Java in 25 hours 