AngularJS Events

AngularJS நிகழ்வுகளைக் கற்றுக்கொள்ளுங்கள்

AngularJS Events

AngularJS க்கு அதன் சொந்த HTML நிகழ்வு டைரக்டிவ்கள் உள்ளன.

உதவிக்குறிப்பு:

AngularJS நிகழ்வு டைரக்டிவ்கள் HTML நிகழ்வுகளை மேலெழுதாது, இரண்டு நிகழ்வுகளும் செயல்படுத்தப்படும்.

AngularJS நிகழ்வு டைரக்டிவ்கள்

இந்த டைரக்டிவ்களில் ஒன்று அல்லது அதற்கு மேற்பட்டவற்றைப் பயன்படுத்தி உங்கள் HTML உறுப்புகளுக்கு AngularJS நிகழ்வு கேட்பான்களைச் சேர்க்கலாம்:

கிளிக் நிகழ்வுகள்

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

விசைப்பலகை நிகழ்வுகள்

  • ng-keydown
  • ng-keypress
  • ng-keyup

சுட்டி இயக்க நிகழ்வுகள்

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

பிற நிகழ்வுகள்

  • ng-blur
  • ng-change
  • ng-focus
  • ng-copy
  • ng-cut
  • ng-paste

நிகழ்வு டைரக்டிவ்கள் சில பயனர் நிகழ்வுகளில் AngularJS செயல்பாடுகளை இயக்க அனுமதிக்கின்றன.

சுட்டி நிகழ்வுகள்

கர்சர் ஒரு உறுப்பின் மேல் நகரும் போது சுட்டி நிகழ்வுகள் ஏற்படுகின்றன, இந்த வரிசையில்:

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

அல்லது ஒரு சுட்டி பொத்தான் ஒரு உறுப்பில் கிளிக் செய்யப்படும் போது, இந்த வரிசையில்:

ng-mousedown
ng-mouseup
ng-click

நீங்கள் எந்த HTML உறுப்பிலும் சுட்டி நிகழ்வுகளைச் சேர்க்கலாம்.

Example

சுட்டி H1 உறுப்பின் மேல் நகரும் போது count மாறியை அதிகரிக்கவும்:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</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 குறியீட்டை வரையறுக்கிறது.

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

நீங்கள் ஒரு செயல்பாட்டையும் குறிப்பிடலாம்:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</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>

மாறுதல், True/False

ஒரு பட்டன் கிளிக் செய்யப்படும் போது ஒரு பகுதி HTML குறியீட்டைக் காட்டவும், பட்டன் மீண்டும் கிளிக் செய்யப்படும் போது மறைக்கவும் விரும்பினால், ஒரு டிராப்பவுன் மெனுவைப் போல, பட்டனை ஒரு மாறுதல் சுவிட்ச் போல செயல்படுத்தவும்:

Click Me

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</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 மாறி Boolean மதிப்பு false ஆக தொடங்குகிறது.

myFunc செயல்பாடு ! (not) ஆபரேட்டரைப் பயன்படுத்தி, showMe மாறியை அது இருப்பதற்கு நேர்மாறாக அமைக்கிறது.

மாறுதல் தர்க்கம்:

showMe = !showMe என்பது showMe இன் தற்போதைய மதிப்பை எடுத்து, அதை மாற்றுகிறது:

  • false → true
  • true → false

இது ஒரு மாறுதல் மெக்கானிசத்தை உருவாக்குகிறது.

$event பொருள்

செயல்பாட்டை அழைக்கும் போது $event பொருளை ஒரு வாதமாக அனுப்பலாம்.

$event பொருள் உலாவியின் நிகழ்வு பொருளைக் கொண்டுள்ளது:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<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>
$event பண்புகள் விளக்கம் பயன்
clientX, clientY சுட்டி ஆயங்கள் சுட்டி நிலையைக் கண்டறிய
keyCode விசை குறியீடு அழுத்தப்பட்ட விசையை அடையாளம் காண
target இலக்கு உறுப்பு நிகழ்வைத் தொடங்கிய உறுப்பு
type நிகழ்வு வகை நிகழ்வு வகையை அடையாளம் காண

நடைமுறை எடுத்துக்காட்டுகள்

கார்ட்டில் சேர்

பொருட்களை வாங்குபவர் கார்ட்டில் சேர்க்க ng-click ஐப் பயன்படுத்தவும்

தேடல்

Enter விசையை அழுத்தும் போது தேடலைச் செயல்படுத்த ng-keyup ஐப் பயன்படுத்தவும்

உருப்படி விரிவாக்கம்

படங்களைக் கிளிக் செய்யும் போது விரிவாக்க ng-click ஐப் பயன்படுத்தவும்

படிவ சரிபார்ப்பு

புலத்தை விட்டு வெளியேறும் போது தரவைச் சரிபார்க்க ng-blur ஐப் பயன்படுத்தவும்

பயிற்சிகள் மூலம் கற்றல்

பின்வரும் குறியீட்டில், $event பொருள் எதற்குப் பயன்படுத்தப்படுகிறது?

<h1 ng-mousemove="getCoordinates($event)">Mouse Over Me!</h1>
சுட்டி நிகழ்வைத் தடுக்க
✗ தவறு! $event நிகழ்வைத் தடுப்பதில்லை.
நிகழ்வுத் தகவலைப் பெற
✓ சரி! $event நிகழ்வுப் பொருள், சுட்டி ஆயங்கள் போன்ற விவரங்களைக் கொண்டுள்ளது.
நிகழ்வைத் தாமதப்படுத்த
✗ தவறு! $event நிகழ்வுகளைத் தாமதப்படுத்த பயன்படுத்தப்படவில்லை.
நிகழ்வு முன்னெச்சரிக்கையை நிறுத்த
✗ தவறு! $event நிகழ்வு முன்னெச்சரிக்கையைக் கட்டுப்படுத்த பயன்படுத்தப்படவில்லை.

பயிற்சியைத் தொடங்கவும்:

மேலே உள்ள பயிற்சிகளை முயற்சிக்கவும். ஒவ்வொரு விருப்பத்தையும் கிளிக் செய்து சரியான பதிலைச் சரிபார்க்கவும்.

AngularJS நிகழ்வுகளை மாஸ்டர் செய்ய இந்த கருத்துகள் முக்கியம்.

நிகழ்வு வரிசை குறிப்பு

சுட்டி கிளிக் வரிசை

  1. ng-mousedown
  2. ng-mouseup
  3. ng-click

சுட்டி நகர்வு வரிசை

  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. ng-mouseleave

விசைப்பலகை வரிசை

  1. ng-keydown
  2. ng-keypress
  3. ng-keyup

நினைவில் கொள்ளுங்கள்:

AngularJS நிகழ்வு டைரக்டிவ்கள் HTML நிகழ்வுகளை மேலெழுதாது. இரண்டும் இயக்கப்படும்.

உதாரணம்: onclick மற்றும் ng-click இரண்டும் இயக்கப்படும்.