« Previous Next »

AngularJS Events

AngularJS has its own HTML events directives..

AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

The event directives allow us to run AngularJS functions in response to specific user events.

Note: An AngularJS event will not overwrite an HTML event. Both events will be executed.

Mouse Events

Mouse events occur when the cursor interacts with an element in the following order:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

Or when a mouse button is clicked on an element, in this order:

  • ng-mousedown
  • ng-mouseup
  • ng-click

You can add mouse events to any HTML element to enhance interactivity.

Output :


The ng-click Directive

The ng-click directive defines AngularJS code that will be executed when the element is clicked.

It is commonly used to run functions or modify data when users interact with buttons or elements.

Output :

Toggle, True/False

If you want to show a section of HTML code when a button is clicked, and hide it when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch.

Output :

$event Object in AngularJS

You can pass the $event object as an argument when calling a function from your HTML template.

The $event object contains the native browser event, which allows you to access event-specific details like mouse position, the target element, or prevent default behavior.

Output :
« Previous Next »