articles

Home / DeveloperSection / Articles / Explain the Events in AngularJS

Explain the Events in AngularJS

Explain the Events in AngularJS

Ashutosh Kumar Verma 166 24-Jun-2024

AngularJS Event Handling

In AngularJS, event handling basically involves using methods and functions to respond to user interactions and other events in your application. 

Here is a detailed overview of event handling in AngularJS,

 

DOM events using directives

Directives in AngularJS allow you to extend HTML with custom behavior to include DOM manipulation and event handling logic. You can use directives to listen for DOM events such as clicks, mouseovers, and keydowns.

'click' event handling

<div ng-app="myApp" ng-controller="MyController">
 <button ng-click="handleClick()">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function() {
   alert('Button clicked!');
 };
});
</script>

In the example above

  • ng-click="handleClick()" is an AngularJS directive that binds the click event to the handleClick() function of the controller.
  • When the button is clicked, the handleClick() function is executed, displaying a warning message.

 

Using the $event Object

You can pass the $event object to its event handler to obtain information about the event, such as target element, key codes, or mouse coordinates.

$event passed to the Event Handler

<div ng-app="myApp" ng-controller="MyController">
 <button ng-click="handleClick($event)">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function(event) {
   alert('Button clicked! Target element: ' + event.target.tagName);
 };
});
</script>

 

Custom Event Handling

AngularJS also supports custom event handling using $emit, $broadcast, and $on methods to communicate between controllers and directives.

Custom Event Handling

<div ng-app="myApp">
 <div ng-controller="ParentController">
   <button ng-click="broadcastEvent()">Broadcast Event</button>
 </div>
 <div ng-controller="ChildController">
   <p>{{ message }}</p>
 </div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ParentController', function($scope) {
 $scope.broadcastEvent = function() {
   $scope.$broadcast('customEvent', 'Data from parent');
 };
});
app.controller('ChildController', function($scope) {
 $scope.$on('customEvent', function(event, data) {
   $scope.message = 'Event received in child: ' + data;
 });
});
</script>


Event Delegation

AngularJS supports event delegation which allows you to handle events on parent elements instead of binding event handlers directly to child elements. This can improve performance, especially with large lists or sharply designed objects.
 

Event Delegation

<div ng-app="myApp" ng-controller="MyController" ng-click="handleClick($event)">
 <button ng-click="handleClick($event)">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function(event) {
   if (event.target.tagName === 'BUTTON') {
     alert('Button clicked!');
   }
 };
});
</script>

 

Overview

Directives- Handle DOM events declaratively with ng-click, ng-change, and ng-keydown.
Controllers- Define functions to handle events triggered by instructions.
Custom Events- Use $emit, $broadcast, and $on to handle scheduled events between controllers and instructions.
Event Delegation- Modify events on parent elements to improve performance and manage dynamic content.

 

Also, Read: Explain the custom directives in AngularJS


Updated 24-Jun-2024
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Leave Comment

Comments

Liked By