Differentiation of AngularJS Events

If you are interested to learn about the AngularJS HTML DOM

AngularJS has its own HTML events directives. When creating more advanced AngularJS applications, sooner or later your application will need to handle DOM events like mouse clicks, moves, keyboard presses, change events etc. AngularJS has a simple model for how to add event listeners to the HTML you generate from your views.

By using AngularJS, you can work with directives as well as use HTML attributes by simply binding data to HTML with the expressions. AngularJS can be an MVC architecture that makes web applications simple to build from the beginning. AngularJS 1.0 was launched in 2010, and if we discuss today, the newest version of AngularJS can be 1.7.8 that was released in March 2019. AngularJS is additionally an open-source framework managed by simply Google using a huge community of programmers.

AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

The event directives allows us to run AngularJS functions at certain user events. An AngularJS event will not overwrite an HTML event, both events will be executed.

Mouse Events

Mouse events occur when the cursor moves over an element, in this order:

ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave

Or when a mouse button is clicked on an element, in this order:

ng-mousedown
ng-mouseup
ng-click

You can add mouse events on any HTML element.

Example

Increase the count variable when the mouse moves over the H1 element:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

The ng-click Directive

The ng-click directive defines AngularJS code that will be executed when the element is being clicked.

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

You can also refer to a function:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

. ng-focus

This directive will execute the particular code when the user focuses on the element with which the ng-focus directive is attached.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="" ng-init="x=0">
<input ng-focus="x = x + 1" />
<h1>{{x}}</h1>
<p>The value of the variable "x" increases every time the input field gets focus.</p>
</body>
</html>

Output:

The value of the variable “x” increases every time the input field gets focus.

4. ng-blur

This directive will execute the particular code when a user loses focuses from the element with which ng-blur directive attach.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<input ng-blur="x = x + 1" ng-init="x=0" />
<h1>{{x}}</h1>
<p>The value of the variable "x" increases every time the input field loses focus.</p>
</body>
</html>

Output:

The value of the variable “x” increases every time the input field loses focus.

5. mouse events

It occurs when the control of cursor moves over an element or an element is clicked by mouse event.

The order of mouse event when the cursor moves over an element is:

ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave

The order of mouse event when the mouse clicks on an element

ng-mousedown
ng-mouseup
ng-click

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
   <style>
     .pinkDiv {
         width: 100px;
         height: 70px;
         background-color: pink;
         padding:2px 2px 2px 2px;
       }
      .lightblueDiv {
           width: 120px;
           height: 100px;
           background-color: lightblue;
           padding:2px 2px 2px 2px;
      }
    </style>
</head>
<body ng-app="">
<h1>AngularJS Mouse Events </h1>
    <div ng-class="{pinkDiv: enter, lightblueDiv: leave}" ng- mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
     Mouse <span ng-show="enter">Enter Color changes to pink</span> <span ng-show="leave">Leave color changes to lightblue</<meta http-equiv="content-type" content="text html; charset="utf-8"">span</meta http-equiv="content-type" content="text>>
    </div>
</body>
</html>

In the above example, the ng-class directive includes a map of CSS classes, so pinkDiv will be applied if enter=true and lighblueDiv will be applied if leave=true. The ng-mouseenter directive sets ‘enter’ to true, which will apply pinkDiv class to the <div> element. In the same way, ng-mouseleave will set leave to true, which will apply lightblueDiv class.

6. $event

When calling the function it can be passed as an argument. It contains the browser’s event object.

<!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="myFunc($event)">Take Mouse Over Me!</h1>
<p>Coordinates are: {{x+ ', ' + y}}</p>
</div>
<script>
var p = angular.module('myapp', []);
p.controller('myctrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
}
});
</script>
<p>The value of clientA and clientB from the event object is displayed whenever mouse is handed over heading "Take Mouse Over Me!".</p>
</body>
</html>

Output:

Take Mouse Over Me!

Coordinates are: 73, 59

The value of clientX and clientY from the event object display whenever a mouse will hand over heading “Take Mouse Over Me!”. The value of coordinates will get change every time, whenever the mouse is headed over the heading.

Custom Event Directives

Using a combination of basic events, angular provides a way to create our own events which are custom events.

AngularJS Event Handling

When we will create an advance angularJS application, we require advanced features for that. Therefore, it requires handling of DOM elements like keyboard press, various mouse clicks etc. AngularJS Events can be handled from within directive itself by using the link function. The directive is allowed to attach itself to the DOM elements by the link in an HTML page.

Syntax-

link: function ($scope, element, attributes)

Link is a function that accepts three parameters in it and they are:

Scope
The element with which directive associated
Attributes of the target element

<!DOCTYPE html>
<html>
<head>
   <meta chrset="UTF 8">
   <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="DemoEvent">
   <div ng-link="">Click Here</div>
</div>
<script type="text/javascript">
    
    var demo = angular.module('DemoEvent',[]);
    demo.directive('ngLink',function(){
       return {
           link:function($scope,ele,attrs) {
               ele.bind('click',function () {
                  ele.html('You clicked here');
                 });}
             }});
</script>
</body>
</html>

Toggle, True/False

If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch:

Click Me

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

The showMe variable starts out as the Boolean value false. The myFunc function sets the showMe variable to the opposite of what it is, by using the ! (not) operator.

$event Object

You can pass the $event object as an argument when calling the function. The $event object contains the browser’s event object:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

Differentiation of AngularJS Events

Differentiation of AngularJS Events

AngularJS Events

Mouse Events

Example

The ng-click Directive

Example

Example

. ng-focus

4. ng-blur

5. mouse events

6. $event

AngularJS Event Handling

Toggle, True/False

Example

$event Object

Example

Category Posts

Categories

Recent Posts