Understanding Events in AngularJS

AngularJS has an elegant mechanism to handle the following DOM events:

  1. Mouse events
  2. Keyboard events
  3. Change events

Lets try to understand each of these three events in detail.

Mouse events

AngularJS enables us to bind event handlers to mouse events along with the ability to use dependency injection in the arguments of these handlers. AngularJS has the following built-in directives to handle mouse events:

  • ng-click
  • ng-dblclick
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover

All the directives above are self-explanatory. ng-click directive is used for mouse click event and ng-dblclick is used to handle mouse double click event and so on.

The following code covers all the mouse events above and how they can be used.

HTML

Script

Notice that for events like MouseDown or MouseUp, we have passed $event to the handling function via dependency injection. This helps us in making use of the properties and methods that are part of the $event service.

Play with the code on Plunker : http://plnkr.co/edit/F71GSgd69kQXE6yCjStW

Keyboard events

Similar to mouse events, AngularJS enables us to bind event handlers to keyboard events along with the ability to use dependency injection in the arguments of these handlers. AngularJS has the following built-in directives to handle keyboard events:

  • ng-keydown
  • ng-keyup
  • ng-keypress

Again, the directives are self explanatory and dive into some code to understand them fully.

HTML

Script

Notice that we passed $event to the event handler so we know the key that was pressed. $event is similar to KeyboardEvent in plain JavaScript.

Here is a Plunker for you to play with the code http://plnkr.co/edit/aMEvJWny71H00Ym03I9F

Change events

Change events are used to capture the event when ever the status of an input field changes due to user interaction. For example, we might want to display some text as soon as the user types into an input field or we may want to display a div when ever a user selects a checkbox. AngularJS has an in-built directive ng-change that can be used to handle change events like above.

  • ng-change

Lets understand how to use ng-change with the following example.

HTML

Script

Notice that unlike mouse and keyboard events, change events do not have an $event variable to retrieve additional data in the event handler. Also, observe that we can use change events with any input element that can change the model.

Here’s a Plunker for you to play with the code http://plnkr.co/edit/P5hykagrYuqoH6aJVEtb

Putting them all in a table,

ngMousedownAllows you to attach custom behavior on mousedown event.
ngMouseenterAllows you to attach custom behavior on mouseenter event.
ngMouseleaveAllows you to attach custom behavior on mouseleave event.
ngMousemoveAllows you to attach custom behavior on mousemove event.
ngMouseoverAllows you to attach custom behavior on mouseover event.
ngMouseupAllows you to attach custom behavior on mouseup event.
ngDblclickAllows you to attach custom behavior on mouse dblclick event.
ngClickAllows you to attach custom behavior on mouse click event.
ngKeydownAllows you to attach custom behavior on keydown event.
ngKeypressAllows you to attach custom behavior on keypress event.
ngKeyupAllows you to attach custom behavior on keyup event.
ngChangeAllows you to attach custom behavior on text change event.

Top