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.


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:


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



THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

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