Introduction
AngularJS is a web framework built in Javascript by Google. An important thing to note when discussing the features of AngularJS is that it is structural as well. The MEAN stack is one of the prominent technical stacks in web development. Knowing the nuances of AngularJS is an essential aspect of being a good MEAN stack developer. AngularJS extends the powers of HTML.
When we talk about AngularJS events, we essentially talk about DOM events. This leads us to the question of what DOM events are. Any user interaction with an element on the DOM can be called an event. This blog will look into the various directives in AngularJS which help us act and respond to DOM or AngularJS events. We will also look into a few common directives and their usage through a few basic examples.
Directives to Control AngularJS Events
Every AngularJS event is 'triggered' by an action of the user. This action may vary from something as simple as moving the mouse or clicking to slightly more complex triggers like double-clicking or even copying and cutting. All AngularJS events are hence bound to these triggers using directives. To learn more about the DOM and directives in AngularJS, refer to this blog!
The following list contains details of the many directives available to bind AngularJS events.
Directive |
Event Description |
ng-mousemove |
The event is triggered when the user moves the mouse. |
ng-mouseup |
The event is triggered when the user moves the mouse upwards. |
ng-mousedown |
The event is triggered when the user moves the mouse downwards. |
ng-mouseenter |
The event is triggered when the user clicks the mouse button. |
ng-mouseover |
The event is triggered when the user hovers the mouse over the specified DOM element. |
ng-cut |
The event is triggered whenever the user uses the cut operation. |
ng-copy |
The event is triggered whenever the user uses the copy operation. |
ng-keypress |
The event is triggered whenever the user presses a key on the keyboard. |
ng-keyup |
The event is triggered whenever the user presses the keyboard's upwards arrow key. |
ng-click |
A single click triggers the event. |
ng-dblclick |
A double click triggers the event. |