What are AngularJS Events

As same as JavaScript, AngularJS has its own HTML events directives. We can add one or more AngularJS Event listeners to HTML element using directives. Below is a list of AngulaJS event listener 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

 

These event directives allow us to execute expression or run AngularJS function at certain user event.

AngularJS events do not override HTML events. Both events are executed independently.

With the help of few examples, we can understand it very easily that AngularJS events either execute or run functions.  Let’s start it with

1. Expressions

In this example, an expression count = count + 1 is calculated every time event Mouse Move fires. Eventually, value of count is increased by one.

Let’s see its output.

Output

As soon as the web page is loaded first time, count variable is initialized to 0.

Once we move cursor on the text, counter gets increased and printed over web page.

2. Functions

Now there is a turn of functions which are called at the time of user event. In this case, we’ll bind an event handler function and initialized it using AngularJS Controller.

Let’s see an example below:

Output

As soon as the web page is loaded, count variable is initialized to 0.

Once we move cursor on the text, counter gets increased and printed over web page.

 

Be  Connected…

Satyendra Mishra

About Satyendra Mishra

Satyendra is a Technical Project Manager with 12+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (AngularJS) and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *