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 উপাদানের উপর চলে যায় তখন গণনা পরিবর্তনশীল বৃদ্ধি করুন:
<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-ক্লিক নির্দেশিকা
এনজি-ক্লিক নির্দেশিকা 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>
টগল করুন, সত্য/মিথ্যা
আপনি যদি একটি বোতামে ক্লিক করার সময় এইচটিএমএল কোডের একটি অংশ দেখাতে চান এবং বোতামটি আবার ক্লিক করার সময় এটিকে লুকাতে চান, একটি ড্রপডাউন মেনুর মতো একটি টগল সুইচ হিসাবে বোতামটিকে প্রয়োগ করুন:
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 ভেরিয়েবলটি মিথ্যার বুলিয়ান মান দিয়ে শুরু হয়।
ফাংশন myFunc! (না) অপারেটর ব্যবহার করে শোমি ভেরিয়েবলকে এটির বিপরীতে সেট করে।
রূপান্তর যুক্তি:
showMe = !showMeshowMe এর বর্তমান মান নেয় এবং এর সাথে প্রতিস্থাপন করে:
- false → true
- true → false
এটি একটি সুইচিং প্রক্রিয়া তৈরি করে।
$ইভেন্ট অবজেক্ট
ফাংশন কল করার সময় আপনি আর্গুমেন্ট হিসাবে $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>
| $ইভেন্ট বৈশিষ্ট্য | ব্যাখ্যা | সুবিধা |
|---|---|---|
| clientX, clientY | পয়েন্টার স্থানাঙ্ক | মাউস অবস্থান খুঁজে বের করতে |
| keyCode | কী কোড | চাপা কী সনাক্ত করতে |
| target | লক্ষ্য উপাদান | ইভেন্টের সূচনাকারী উপাদান |
| type | ইভেন্টের ধরন | ঘটনার ধরন সনাক্ত করতে |
ব্যবহারিক উদাহরণ
কার্টে যোগ করুন
ক্রেতা কার্টে আইটেম যোগ করতে ng-ক্লিক ব্যবহার করুন
অনুসন্ধান
এন্টার কী চাপলে লুকআপ চালানোর জন্য ng-keyup ব্যবহার করুন
আইটেম সম্প্রসারণ
ছবি ক্লিক করার সময় প্রসারিত করতে ng-ক্লিক ব্যবহার করুন
ফর্ম বৈধতা
ক্ষেত্র ছেড়ে যাওয়ার সময় ডেটা পরীক্ষা করতে 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উভয় সক্রিয় করা হবে.