Table of contents
1.
Introduction
2.
Directives to Control AngularJS Events
3.
Code Examples 
3.1.
Example 1
3.1.1.
Code
3.2.
Example 2
3.2.1.
Code
3.3.
Example 3
3.3.1.
Code
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

AngularJS Events

Author Gunjeev Singh
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

AngularJS is a web framework built in Javascript by Google. An important thing to note when discussing the features of AngularJS is that it is structural as well. The MEAN stack is one of the prominent technical stacks in web development. Knowing the nuances of AngularJS is an essential aspect of being a good MEAN stack developer. AngularJS extends the powers of HTML.

 

When we talk about AngularJS events, we essentially talk about DOM events. This leads us to the question of what DOM events are. Any user interaction with an element on the DOM can be called an event. This blog will look into the various directives in AngularJS which help us act and respond to DOM or AngularJS events. We will also look into a few common directives and their usage through a few basic examples.

Directives to Control AngularJS Events

Every AngularJS event is 'triggered' by an action of the user. This action may vary from something as simple as moving the mouse or clicking to slightly more complex triggers like double-clicking or even copying and cutting. All AngularJS events are hence bound to these triggers using directives. To learn more about the DOM and directives in AngularJS, refer to this blog!

 

The following list contains details of the many directives available to bind AngularJS events. 

Directive

Event Description

ng-mousemove

The event is triggered when the user moves the mouse.

ng-mouseup

The event is triggered when the user moves the mouse upwards.

ng-mousedown

The event is triggered when the user moves the mouse downwards.

ng-mouseenter

The event is triggered when the user clicks the mouse button.

ng-mouseover

The event is triggered when the user hovers the mouse over the specified DOM element.

ng-cut

The event is triggered whenever the user uses the cut operation.

ng-copy

The event is triggered whenever the user uses the copy operation.

ng-keypress

The event is triggered whenever the user presses a key on the keyboard.

ng-keyup

The event is triggered whenever the user presses the keyboard's upwards arrow key.

ng-click

A single click triggers the event.

ng-dblclick

A double click triggers the event.

Code Examples 

Now that we have learned the various directives available to us to control AngularJS events, we will look into some examples where these directives are used to change the DOM on the trigger of AngularJS events.

Example 1

In this example, we will look at the ng-mousemove directive. In this example, the directive is applied to an H1 tag. Whenever a user moves their mouse over the heading, the number on the screen will increase by unity.

Code

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="App1" ng-controller="Ctrl1">
      <h1 ng-mousemove="number = number + 1">Sample Heading Ninjas!</h1>
      <h2>{{ number }}</h2>
      <p>
        The number given above is incremented by onepresseser the mouse is moved
        over the heading.
      </p>
    </div>
    <script>
      var app = angular.module("App1", []);
      app.controller("Ctrl1", function ($scope) {
        $scope.number = 0;
      });
    </script>
  </body>
</html>

 

The above gif shows numbers being increased on mouse movement over heading.

Example 2

In this example, we will implement the ng-click and ng-dblclick directives. A single and double click will trigger the AngularJS events. A single click binds the first button, while the double click directive binds the second button.

Code

<!DOCTYPE html>
<html>
  <head>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>
       
    <div ng-app="App1" ng-controller="Ctrl1">
      <button ng-click="count = count + 1">
          This button will increase the count by 1 on a single click.  
      </button>
      <button ng-dblclick="count = count + 2">
          This button will increase the count by 2 on a double click.  
      </button>
      <h2>Total Count: {{ count }}</h2>    
    </div>   
    <script>
      var app = angular.module("App1", []);
      app.controller("Ctrl1", function ($scope) {
        $scope.count = 0;
      });
    </script>
  </body>
</html>

This gif shows how the first button increases the count on a single click while the second button increases the count on a double click.

Example 3

We will use the mouse control events using the AngularJS $event object in this example. The $event object contains the browser's event object. We can pass the $event object as an argument when calling the function. 
 

We pass this object as a parameter. This object, in return, triggers the event.

 

Code

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <body>
   <div ng-app="myApp" ng-controller="myCtrl">
     <h1 ng-mousemove="getDateTime($event)">Mouse Over Me!</h1>

     <p>Date and Time: {{ currentDate | date:'dd/MM/yyyy HH:mm:ss'}}</p>
   </div>
   <script>
     var app = angular.module("myApp", []);
     app.controller("myCtrl", function ($scope) {
       $scope.getDateTime = function () {
         $scope.currentDate = new Date();
       };
     });
   </script>
 </body>
</html>

Output

FAQs

  1. What is the difference between ng-mouseover and ng-mousemove?
    The ng-mouseover directive triggers an event every time the mouse enters the specified element. The ng-mousemove directive triggers an event every time the mouse moves inside the given element's area.
     
  2. Can we call objects on event triggers?
    Yes! We can use directives to call objects and functions whenever events are triggered. We can call the function in the directive.

Key Takeaways

This blog looked into the directives that are used to control AngularJS events. We learned how to use various directives to act upon triggers of AngularJS events. The two examples used in this blog explained the concepts of ng-mousemoveng-click, and ng-dblclick.

 

Do not stop here; continue learning web development with our series of curated blogs using this link!

Live masterclass