ఆంగులార్ జెఎస్ సొంత హెచ్ఎంఎల్ ఇవెంట్ డిరెక్టివ్స్ కలిగి ఉంటుంది.

ఆంగులార్ జెఎస్ ఇవెంట్స్

ఈ కింది ఒకటి లేదా అనేకందుకు సిఫార్సు చేయబడిన డిరెక్టివ్స్ ఉపయోగించి, మీ హెచ్ఎంఎల్ ఎలిమెంట్స్ కు ఆంగులార్ జెఎస్ ఇవెంట్ లిసెన్సర్స్ జోడించవచ్చు:

• 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

ఇవెంట్ కమాండ్స్ మాకు కొన్ని వినియోగదారు ఇవెంట్స్ పై ఆంగులార్ జెఎస్ ఫంక్షన్స్ నడపడానికి అనుమతిస్తాయి。

AngularJS 事件不会覆盖 HTML 事件，两个事件都会被执行。

మౌస్ ఇవెంట్స్

ఎల్లప్పుడూ మౌస్ ను ఎలమెంట్ పైకి కదిలినప్పుడు క్రింది క్రమంలో మౌస్ ఇవెంట్స్ జరుగుతాయి:

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

లేదా మౌస్ క్లిక్ జరిగినప్పుడు క్రింది క్రమంలో ప్రారంభించబడతాయి:

• ng-mousedown
• ng-mouseup
• ng-click డిరెక్టివ్

మౌస్ ఇవెంట్స్ ను ఏ హ్ట్మ్ల్ ఎలమెంట్ పైనా జోడించవచ్చు.

实例

మౌస్ ఇవెంట్స్

  
హ్1 ఎలమెంట్ పైకి మౌస్ ను కదిలించినప్పుడు count వేరియబుల్ ను పెంచండి:  
<h1 ng-mousemove="count = count + 1">మౌస్ ను నాకు పైకి కదిలించండి!</h1>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  <p>{{ count }}</p>  
});  
</script>

స్వయంగా ప్రయత్నించండి

<h2>{{ count }}</h2>

ng-click డిరెక్టివ్ ng-click

实例

డిరెక్టివ్ నుండి ఎల్లప్పుడూ మౌస్ ఇవెంట్స్ జరుగుతాయి మరియు జెల్లియాస్ జరుగుతాయి అనే అంగుళంగా డిఫైన్ చేయబడింది.
<button ng-click="myFunction()">క్లిక్ చేయండి!</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  <p>{{ count }}</p>
});
</script>

స్వయంగా ప్రయత్నించండి

<button ng-click="count = count + 1">క్లిక్ చేయండి!</button>

实例

మీరు ఫంక్షన్ ను సూచించవచ్చు:
<button ng-click="myFunction()">క్లిక్ చేయండి!</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  <p>{{ count }}</p>
  $scope.count = 0;
    $scope.myFunction = function() {
  }
});
</script>

స్వయంగా ప్రయత్నించండి

$scope.count++;

ట్యూన్, నిజం/సత్యం లేదా సందేహం

实例

  
నేను నొక్కండి  
<button ng-click="myFunc()">నేను నొక్కండి!</button>  
  <div ng-show="showMe">  
  <h1>మెనూ:</h1>  
  <div>పీసా</div>  
  <div>ఇటాలియన్ పప్పుదాన్ని</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  <div>మత్స్య ఉత్పత్తులు</div>  
  $scope.showMe = false;  
    $scope.myFunc = function() {  
  }  
});  
</script>

స్వయంగా ప్రయత్నించండి

showMe $scope.showMe = !$scope.showMe; వేరియబుల్ ప్రారంభంలో బుల్ విలువ ఉంటుందిfalse

。 myFunc ఫంక్షన్ ద్వారా !కాల్కులేషన్ (లేదా) ఆపరేటర్ ద్వారా ఫంక్షన్ ను ఉపయోగించి showMe వేరియబుల్ ప్రారంభంలో వాల్యూ ప్రతికూలంగా మార్చవచ్చు。

$event ఆబ్జెక్ట్

ఫంక్షన్ కాల్ చేసినప్పుడు దాని ప్రస్తుత విలువను విపరీతమైన విలువకు మార్చవచ్చు $event ఆబ్జెక్ట్ ను పరామితిగా పంపడం జరుగుతుంది。

$event 对象包含浏览器的事件对象：

实例

鼠标移到我上方！
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

స్వయంగా ప్రయత్నించండి