Events and Event handlers
Event handling is an important feature of most applications.Event is an action performed by an end user or some application component to notify the application.Common example of events are:
- User clicking a button on the User Interface or pressing a shortcut key.
- Notification by a database component when a new record is inserted in a table.
When an event occurs it is handled by an event handler.Depending upon the system requirement application can handle the event in different ways.For example on clicking the save button the save event handler will be called which will save the values in the database.
Events in AngularJS
Events in a AngularJS application can be classified as
- Mouse events occurs when some mouse button action occurs such as mousedown.
- Keyboard events occurs when some keyboard button action occurs such as keydown
change events. - Change events occurs when a value of some input text element changes such as the text in a textbox.
Some of the important events commonly used in an AngularJS application are:
| Event Directive | Description | Example |
| ngClick | Attaches behavior for the elements click event | <button ng-click=”buttonClicked()”> |
| ngDblclick | Attaches behavior for the elements double click event | <button ng-dblclick=”buttonDoubleClicked()”> |
| ngFocus | Attaches behavior for the elements focus event | <input type=”text” ng-focus=”focusCount=focusCount+1″ ng-init=”focusCount=1″ > Focussed {{focusCount}} times </input> |
| ngKeydown | Attaches behavior for the elements keydown event | <input type=”text” ng-keydown=”keydownCount=keydownCount+1″ ng-init=”keydownCount=1″ > key down pressed {{keydownCount}} times </input> |
| ngKeyup | Attaches behavior for the elements keyup event | <input type=”text” ng-keyup=”keyupCount=keyupCount+1″ ng-init=”keyupCount=1″ > key up pressed {{keyupCount}} times </input> |
| ngMousedown | Attaches behavior for the elements mousedown event. | <input type=”text” ng-mousedown=”mousedownCount=mousedown+1″ ng-init=”mousedown=1″ > mousedown pressed {{mousedownCount}} times </input> |
| ngMouseup | Attaches behavior for the elements mouseup event. | <input type=”text” ng-mouseup=”mouseupCount=mouseup+1″ ng-init=”mouseup=1″ > mousedown pressed {{mouseupCount}} times </input> |
| ngSubmit | Attaches expression to the onsubmit event. | <form ng-submit=”submit expression”></form> |
| ngChange | Attaches behavior for the input elements change event such as the change in the value of a textbox | <input type=”text” ng-model=”name” ng-change=”nameUpdated()”></input> |
Handling events in AngularJS
We can specify either a function or an expression as a value of most of the event directives.To handle an event in AngularJS application we follow the below steps:
- Identify the element to which event needs to be attached
- define an event handler.This could either be an event handling function or an expression
- attach the function or expression to the element using the event handling directive of AngularJS
In the following example we have specified an inline expression as a value of the ng-click directive for the first button element.Whereas for the second button ng-click refers to a function.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myModel = {};
$scope.myModel.sayHello = function()
{
alert('Hello!');
};
} );
</script>
</head>
<body ng-app="myapp" ng-controller="MyController">
<div ng-controller="MyController" >
</div>
<button ng-click="message='welcome '+name" ng-init="name='ashish'" >
Say Welcome!
</button>
<button ng-click="myModel.sayHello()">
Say Welcome!
</button>
<span>
{{message}}
</span>
</body>
</html>
Communicating across the controllers with $broadcast(),$emit() and $on()
Real world AngularJS application will consist of many controllers. We can use events for communication across the different controllers.AngularJS provides the following methods which implements the publisher subscriber design pattern for communication between the controllers
- $broadcast() Used for raising events.The events travel from the parent controller to the child controller
- $emit() Like $broadcast() this is also used for raising events.But the events raised by $emit() travel from the child controller to the parent controller
- $on() Used for defining the event handler for the events raised by the $broadcast() and $emit() methods.
Leave a Reply