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
|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.|
|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.|
|To set a custom behaviour for various types of keyboard
these events are triggered on press/release of key.
|To set a custom behaviour for six types of
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 DirectivesGive 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.