در قسمت شانزدهم آموزش انگولار جی اس به بررسی event ها یا رخدادها خواهیم پرداخت. پیشنهاد می‌شود قبل از ورود به این قسمت سایر قسمت‌های دوره آموزش انگولار جی اس را مطالعه فرمایید.
انگولار جی اس هم دستورالعمل مخصوص خود برای event ها یا رخدادها را دارد.
event یا رخ داد
برای فعالسازی دستورالعمل event یا رخ دادها در انگولار جی اس می‌توانید از یک یا چند دستورالعمل زیر استفاده کنید:
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
استفاده از دستورالعمل‌های بالا در رخ‌داده‌ای html باعث می‌شود که تابع خاص شما اجرا شود.
یک رخ داد انگولار جی اس یک رخ داد HTML را بازنویسی نخواهد کرد، هر دو رویداد اجرا خواهند شد.
رخ داد یا event نشانگر ( موس)
رخ داد نمایشگر هنگامی اجرا می‌شود که نشانگر یا موس شما روی المان قرار بگیرد برای استفاده از این دستورالعمل باید از کدهای زیر استفاده کنید:
ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave
رخ‌داده‌ای زیر هنگامی اجرا می‌شوند که بر روی المان خاصی کلیک کنید:
ng-mousedown
ng-mouseup
ng-click
شما می‌توانید از رخ‌داده‌ای موس بر روی هر تگ html استفاده کنید برای درک بهتر این موضوع به مثال زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
با کشیدن موس بر روی المنت بالا میبینید که عدد 0 داده شده تغییر میکند.
دستورالعمل ng-click
همان‌طور که از تیتر این موضوع مشخص است این دستورالعمل هنگامی اجرا می‌شود که بر روی المان خاصی کلیک شود، برای درک بهتر این موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
همچنین برای اجراشدن کد فوق می‌توانید از تابعی استفاده کنید، به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> <br> |
Toggle, True/False
اگر می‌خواهید یک بخش از کد اچ تی‌ام آل را هنگامی‌که یک دکمه روی آن کلیک می‌کنید نشان می‌دهد و هنگامی‌که دکمه دوباره کلیک می‌شود، مانند یک منوی کشویی پنهان می‌شود، دکمه را مانند یک سوئیچ تغییر دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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 به‌عنوان مقدار بولین اشتباه شروع می‌شود.
تابع myFunc متغیر showMe را با مخالف بودن آن با استفاده از! (نقیض) استفاده میکند.
شی‌ء event
هنگام فراخوانی تابع می‌توانید از شی‌ء $event به‌عنوان یک پارامتر عبور کنید.
شی $event حاوی رویداد مرورگر است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
امیدوارم این آموزش برای شما مفید واقع‌شده باشد.
برای مطالعه مطالب بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.
موفق باشید.
