AngularJS Fareye Bağlı Tetikleyici Direktifler, Turkish Tutorial
English Description
Triggered Trigger Directives
AngularJS has 2 click trigger directives, ng-click and ng-dblclick. Ng-click specifies the function to trigger when the DOM object is clicked, ng-dblClick specifies the function that will be fired when the object is clicked 2 times.
ng-mouseup and ng-mouseDown Directives
When clicking on a DOM object triggers the function specified by the ng-mouseDown directive, the function specified by the ng-mouseup directive is triggered when the click is completed.
ng-mouseenter and ng-mouseLeave Directives
The ng-mouseenter directive triggers the function that is triggered when the mouse pointer enters the bounds of a DOM element, and sets the ng-mouseleave function that triggers when the pointer is subtracted from this element's bounds.
ng-mouseover Directive
The ng-mouseover directive basically performs the same function as the ng-mouseenter directive. It determines the function to trigger when the element is over. The biggest difference between MouseOver and MouseEnter POIs is that the mouseover trigger is also affected by other elements on the element's layer.
Keyboard Linked Trigger Directives
In AngularJS, we can follow the events occurring on the keyboard side and perform actions (functions) related to these events. The majority of them are similar to the event listeners in Javascript. Let's look at examples of many of these trigger directives.
ng-keydown and ng-keyup Directives
Inside a box is an event directive that defines the functions to be performed when a key press action (ng-keydown) and action completion (ng-keyup) occur on the keyboard.
Türkçe Açıklama
Fareye Bağlı Tetikleyici Direktifler
AngularJS, ng-click ve ng-dblclick olmak üzere 2 tıklama tetikleyici direktife sahiptir. Ng-click, DOM objesine tıklandığında tetiklenecek fonksiyonu belirtirken, ng-dblclick, objeye 2 kere tıklandığında tetikleyecek fonksiyonu belirtir.
Bir örnek ile ikisinin çalışma mantığını görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.kutu {
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<div class="kutu" ng-click="f1()"></div>
<div class="kutu" ng-dblclick="f2()"></div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.f1 = function(){
alert("ng-click ile Tetiklendi!");
}
$scope.f2 = function(){
alert("ng-dblclick ile Tetiklendi!");
}
});
</script>
</body>
</html>
Örneğimizde bulunan 2 kutu ile her bir kutu için tıklama tetikleyicilerinin çalışma mantıkşarını görebilirsiniz. İlk kutuya 1 kez tıkladığımızda fonksiyon tetiklenirken, 2. Kutuya 2 kere ard ardına tıkladığımızda çalıştığını göreceğiz.
ng-mouseup ve ng-mousedown Direktifleri
Bir DOM objesi üzerine tıklama başlatıldığında, ng-mousedown direktifinin belirttiği fonksiyon tetiklenirken, tıklama tamamlandığında ng-mouseup direktifi tarafından belirlenen fonksiyon tetiklenir.
Basit bir örnek ile nasıl kullanıldığını gösterelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.kutu{
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<div class="kutu" ng-mousedown="f1()" ng-mouseup="f2()"></div>
{{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.durum = "Sayfa yüklendi.";
$scope.f1 = function(){
$scope.durum = "Tıklama başladı.";
}
$scope.f2 = function(){
$scope.durum = "Tıklama sona erdi.";
}
});
</script>
</body>
</html>
ng-mouseenter ve ng-mouseleave Direktifleri
Fare işaretçisinin bir DOM elementinin sınırları içine girdiğinde tetiklenen fonksiyonu ng-mouseenter direktifi tetiklerken bu elementin sınırından işaretçi çıkarıldığında tetiklenen fonksiyonu ng-mouseleave belirler.
Bir örnek ile bu durumu gösterelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.kutu {
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<div class="kutu" ng-mouseenter="f1()" ng-mouseleave="f2()"></div>
{{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.durum = "Sayfa yüklendi.";
$scope.f1 = function(){
$scope.durum = "Element içine girildi.";
}
$scope.f2 = function(){
$scope.durum = "Element içinden çıkıldı.";
}
});
</script>
</body>
</html>
Bu olay tanımlayıcıları ile ilgili dikkat edilmesi gereken en önemli nokta, olay tetiklemesinin sadece element sınırı içine girildiğinde veya çıkıldığında 1 kez gerçekleştiriliyor olmasıdır.
ng-mouseover Direktifi
ng-mouseover direktifi temelde ng-mouseenter direktifi ile aynı işlevi görmektedir. Elementin üzerine gelindiğinde tetiklenecek fonksiyonu belirler. Mouseover ve mouseenter oıayları arasındaki en büyük fark, mouseover tetiklemesinin, elementin katman olarak üzerinde bulunan diğer elementlerden de etkileniyor olmasıdır.
Klavye Bağlı Tetikleyici Direktifleri
AngularJS'de klavye tarafında gerçekleşen olayları takip ederek, bu etkinliklere bağlı işlemler (fonksiyonlar) gerçekleştirebiliriz. Çoğunluğu Javascript'te bulunan olay dinleyicileri ile benzer işlevi görmektedir. Bu tetikleyici direktiflerin çok kullanılanlarını örnekler ile inceleyelim.
ng-keydown ve ng-keyup Direktifleri
Bir yazı kutusu içerisinde, klavyede bir tuşa basma eylemi başladığında (ng-keydown) ve eylem tamamlandığında (ng-keyup) gerçekleşecek fonksiyonları tanımlayan olay direktifleridir.
Basit bir örnek ile nasıl çalıştıklarını görelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.kutu {
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Klavyeyi Kullan: <input type="text" ng-keydown="f1()" ng-keyup="f2()"/>
<hr>
Durum: {{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.durum = "Sayfa Yüklendi!";
$scope.f1 = function(){
$scope.durum = "Tuşa basılı..."
}
$scope.f2 = function(){
$scope.durum = "Tuşa basılma tamamlandı!"
}
});
</script>
</body>
</html>
Github: https://github.com/angular/angular.js
Posted on Utopian.io - Rewarding Open Source Contributors