As a web developer, we will have to deal with different DOM events like key press, mouse moves, mouse clicks and other change events.  In this tutorial, we will look into the AngularJS Directives for handling these events with suitable examples.

Contents:

  • Introduction to AngularJS Event Listener Directives
  • AngularJS events example

Introduction to AngularJS Event Listener Directives

The following list shows the available AngularJS event listener directives for DOM events.

  • ng-click
  • ng-dblclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-change

Usage

We can use above AngularJS event listener directives as an attribute of HTML element as shown below.

Here expression is evaluated on triggering each event.

AngularJS Events Example

The following example demonstrates the angularJS events. Directives like ngClick, ngFocus etc expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. The event object is also available for key events and can be used to get keyCode, altKey etc. values.

index.html

The controller is created in the following file. You can see the use of $event object.

app.js

The following CSS styling is used in the example.

mystyle.css

Now you can play with following output.

That’s all for now and we will see more angularJS features in upcoming tutorials.

By admin

Leave a Reply