Search within TutorialsPark

AngularJS Event Handling


Learn how to use AngularJS Event Directives to provide Notification based on User Interaction.


AngularJS Event Handling : Event Directives

The AngularJS has a set of Event Directives that can be used to set custom behaviour when several types of events are triggered.The table below has a list of all such event directives

Table : AngularJS Event Handling Event Directives

Name Description
ng-blur To set a custom behaviour for blur event, the events is triggered when an element loses the focus.
ng-change To set a custom behaviour for change event,
the event is triggered when a form element's contents are changed.
ng-click To set a custom behaviour for click event, the event is triggered when the mouse is clicked.
ng-copy
ng-cut
ng-paste
To set a custom behaviour for events of cut, copy and paste
ng-dblclick To set a custom behaviour for dblclick event,
the event is triggered when the element is double clicked using a mouse pointer.
ng-focus To set a custom behaviour for focus event, the event is triggered when the element gains focus.
ng-keydown
ng-keypress
ng-keyup
To set a custom behaviour for various types of keyboard event,
these events are triggered on press/release of key.
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
To set a custom behaviour for six types of mouse events,
these events are triggered when mouse pointer interacts with an element.
ng-submit To set a custom behaviour for the submit event, the event is triggered when the form is submitted.

AngularJS Event Handling : Custom Behaviour using Event Directives

In the demo below we have used the AngularJS Event directives of ng-click and ng-mouse to set custom behavior when triggered. All other events too can be used in the same way.

: AngularJS Event Handling Setting Custom Behaviour using Event Directives

Give it a TRY! » Note:The directive ng-click is used with buttons to evaluate the expression within and apply effects

AngularJS Events : Creating Custom Event Directives

The AngularJS allows you to create a custom Event directive using a combination of basic events.

In the demo, we create a custom event, which is a combination of event mouseover and keydown, we are calling it MouseOver-Keydown Event. You can create other events like Tap which is a combination of basic events touchstart and touchend.

Example: AngularJS Events Creating Custom Events

Give it a TRY! » Note:Move the Mouseover and Press down a Key to trigger the Event.