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>
பயிற்சியைத் தொடங்கவும்:
மேலே உள்ள பயிற்சிகளை முயற்சிக்கவும். ஒவ்வொரு விருப்பத்தையும் கிளிக் செய்து சரியான பதிலைச் சரிபார்க்கவும்.
AngularJS நிகழ்வுகளை மாஸ்டர் செய்ய இந்த கருத்துகள் முக்கியம்.
நிகழ்வு வரிசை குறிப்பு
சுட்டி கிளிக் வரிசை
- ng-mousedown
- ng-mouseup
- ng-click
சுட்டி நகர்வு வரிசை
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
விசைப்பலகை வரிசை
- ng-keydown
- ng-keypress
- ng-keyup
நினைவில் கொள்ளுங்கள்:
AngularJS நிகழ்வு டைரக்டிவ்கள் HTML நிகழ்வுகளை மேலெழுதாது. இரண்டும் இயக்கப்படும்.
உதாரணம்: onclick மற்றும் ng-click இரண்டும் இயக்கப்படும்.