एंजुलरजेएस इवेंट

AngularJS अपने अपने HTML इवेंट निर्देश रखता है।

एंजुलरजेएस इवेंट

आप निम्नलिखित एक या अधिक निर्देशों का उपयोग करके AngularJS इवेंट लिस्टेनर को अपने HTML एलीमेंट में जोड़ सकते हैं:

• 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 फ़ंक्शन चलाएं।

AngularJS इवेंट HTML इवेंट को ओवरराइड नहीं करते हैं, दोनों इवेंट चलते हैं।

माउस इवेंट

एलीमेंट पर माउस का स्पर्श होने पर निम्नलिखित क्रम में माउस इवेंट होते हैं:

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

या, एलीमेंट पर माउस क्लिक करने पर निम्नलिखित क्रम में इवेंट ट्रिगर होते हैं:

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

आप किसी भी HTML एलीमेंट पर माउस इवेंट जोड़ सकते हैं。

इनस्टांस

H1 एलीमेंट पर माउस ले जाने पर count वेरियेबल बढ़ाया जाता है:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">माउस को मुख पर ले जाएं!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

स्वयं प्रयास करें

ng-click इन्डिरेक्टिव

ng-click इन्डिरेक्टिव एलीमेंट को क्लिक करने पर चलाने वाले AngularJS कोड को परिभाषित करते हैं。

इनस्टांस

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">क्लिक करें!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

स्वयं प्रयास करें

आप एक फ़ंक्शन को भी संदर्भित कर सकते हैं:

इनस्टांस

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">क्लिक करें!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

स्वयं प्रयास करें

टूटना, सच/झूठा

अगर आप बटन को क्लिक करने पर एक हिस्सा HTML कोड दिखाना चाहते हैं और फिर बटन को दोबारा क्लिक करने पर छोड़ना चाहते हैं, जैसे कि ड्रॉपडाउन मेनू की तरह, तो बटन को स्विच की तरह दिखाएं:

इनस्टांस

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">क्लिक करें!</button>  
<div ng-show="showMe">  
  <h1>मेनूः</h1>  
  <div>पीज़ा</div>  
  <div>इटली नाश्ता</div>  
  <div>मछली</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

स्वयं प्रयास करें

showMe वे वारियेबल शुरू करने पर बूलीयन मूल्य है false।

myFunc फ़ंक्शन को !ऑपरेटर (गैर-) showMe वे वारियेबल को उसके मौजूदा मूल्य के विपरीत के मूल्य कर सकते हैं。

$event वस्तु

फ़ंक्शन को बुलाते समय $event वस्तु को पैरामीट के रूप में पास किया जाता है。

$event वस्तु ब्राउज़र के इवेंट ऑब्जैक्ट को शामिल करती है:}}

इनस्टांस

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">माउस को मेरे ऊपर ले जाएं!</h1>
<p>कोण: {{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>

स्वयं प्रयास करें