In this tutorial we’ll be looking at the different ways we can handle events in AngularJS. We’ll be exploring several of the event listening directives that AngularJS has on offer and how we can use these to create cool behaviours in our AngularJS Applications.
In most modern web browsers, every time something interesting happens in either the Document or the browser an event is generated. Within AngularJS we can register event listeners that will listen for said events and perform some action whenever they occur.
An event can be a vast number of things, from hovering over a hyperlink to double-clicking on an object on the page and thankfully Angular has directives that cover a lot of these.
AngularJS Event Listeners
The complete list of AngularJS events are as follows:
These can be used by placing them on the object of your page and passing this directive the name of the function you wish to call or the code that you wish to execute.
This shows the power of the AngularJS framework as it hides all the ugly DOM manipulation code and allows us to focus on implementing the business logic into our application.
Below you’ll find an array of how we can utilize these event handling directives in AngularJS. These are just some examples of how you could go about implementing these directives in your own Angular application.