AngularJS Events, TutorialsPoint, AngularJS Events Tutorial

AngularJS Events

AngularJS includes certain directives which can be used to provide custom behavior on various HTML DOM elements, such as ng-click, ng-copy, ng-dblclick, ng-mouseenter, ng-mouseup, ng-paste etc.

AngularJS Event Directives
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keyup
ng-keypress
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup

ng-click Event

Add ng-click directive counts the total clicks an HTML element. Bind the model to html and see the variation.

<button ng-click="clickCounter=clickCounter + 1">Click Here!</button>
<h4>Total clicks : {{ clickCounter }}</h4>

<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS ng-click Event</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
 <body>
 
      <div ng-app="">
      
          <button ng-click="clickCounter=clickCounter + 1">Click Here!</button>
          <h4>Total clicks : {{ clickCounter }}</h4>
         
      </div>  
      
   </body>
</html>

Output :

AngularJS Mouse Events

angulaJS important mouse event directives are : ng-mouseenter and ng-mouseleave.

In the below example, the ng-class directive includes map of CSS classes, so color_1 will be applied if enter=true and color_2 will be applied if leave=true. The ng-mouseenter directive sets 'enter' to true, which will apply color_1 class to the <div> element. In the same way, ng-mouseleave will set leave to true, which will apply color_2 class.

<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Mouse Event</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
 
<style>
.color_1 {
width: 150px;
height: 150px;
border-radius:100px;
background-color:#0099da;
padding:2px 2px 2px 2px;
color:#FFF;
}
 
.color_2 {
width: 150px;
height: 150px;
border-radius:100px;
background-color:#F60;
padding:2px 2px 2px 2px;
color:#000;
}
.padding{ padding:40px 0px 0px 20px;}
</style>
</head>
 
<body ng-app>
 
    <h2>Mouse Events : </h2>
    <div ng-class="{color_1: enter, color_2: leave}" 
     ng-mouseenter="enter=true;leave=false;" 
     ng-mouseleave="leave=true;enter=false">
        <h3 class="padding">
          Mouse <span ng-show="enter">Enter</span> 
          <span ng-show="leave">Leave</span>
        </h3>
    </div>
    
</body>
</html>

Output :

AngularJS Tutorial