Website sayfaları içerisinde nesneler üzerinde meydana gelen olayların tanımlanmasında ve bu olaylardan bilgi edinilmesinde, tarayıcı nesneleri kullanılır, aşağıda "event" nesnesinin özelliklerini ve metotlarını inceleyebilirsiniz.
Bu yazımızda "event" nesnesinin "button" özelliğinin kullanımı ile ilgili bir örnek yapacağız.
"event" nesnesinin "button" özelliğini kullanarak websitenizde sağ tuş, sol tuş veya orta tuş basıldığında uyarı mesajı verebilir, bu sayede sitenizdeki resimlerinizin veya içeriğinizin kaydedilmesini tam anlamıyla olmasa da kısmen engelleyebilirsiniz.
Website içerisinde, mouse, klavye kullanımı durumlarında bilgi almak için, duruma göre yönlendirme veya engelleme yapmak için bu fonksiyonları kullanabilirsiniz (Girilen verinin denetimi, mouse imlecinin konumu ile ilgili bilgi alıp duruma göre müdahale etme, klavye üzerinde kısayollar verme vb.).
Özellikler..
- altKey: Alt tuşuna basılıp basılmadığını (true/false) kontrol eder.
- ctrlKey: Ctrl tuşuna basılıp basılmadığını (true/false) kontrol eder.
- shiftKey: Shift tuşuna basılıp basılmadığını (true/false) kontrol eder.
- button: Farede basılan tuşa göre ilgili sayı değerini döndürür.
- keyCode: Keypress olayında klavyeden basılan tuşun ASCII kodunu verir.
- which: Klavyeden basılan herhangi bir tuşun ASCII kodunu verir.
- charCode: keypress olayında, klavyeden basılan tuşun ASCII kodunu verir.
- clientX: Pencere içerisindeki sayfa alanında fare işaretçisinin soldan uzaklığını verir.
- clientY: Pencere içerisindeki sayfa alanında fare işaretçisinin üstten uzaklığını verir.
- layerX: Katman içerisindeki fare işaretçisinin soldan uzaklığını verir.
- layerY: Katman içerisindeki fare işaretçisinin üstten uzaklığını verir.
- offsetX: Katman içerisindeki fare işaretçisinin soldan uzaklığını verir.
- offsetY: Katman içerisindeki fare işaretçisinin üstten uzaklığını verir.
- pageX: Döküman üzerinde fare işaretçisinin soldan uzaklığını verir.
- pageY: Döküman üzerinde fare işaretçisinin üstten uzaklığını verir.
- screenX: Ekranda fare işaretçsinin soldan uzaklığını verir.
- screenY: Ekranda fare işaretçsinin üstten uzaklığını verir.
- x: Pencere içerisindeki sayfa alanaında fare işaretçisinin soldan uzaklığını verir.
- y: Pencere içerisindeki sayfa alanaında fare işaretçisinin soldan uzaklığını verir.
Uygulama..
Bu örneğimizde mouse üzerinde basılan tuşa göre uyarı veren bir uygulama yapacağız. (Bu sayede website tasarımlarınızda sağ tuş ile kopyalama veya kaydetme olayını nispeten engelleyebilirsiniz).
<script type="text/javascript">
var solTus=0;
var ortaTus=1;
var sagTus=2;
if(navigator.userAgent.indexOf('MSIE')!=-1)
{
var solTus=1;
var ortaTus=4;
var sagTus=2;
}
function mouse(e){
switch(e.button)
{
case solTus:alert("Sol tuşa bastınız.");break;
case sagTus:alert("Sağ tuşa bastınız.");break;
case ortaTus:alert("Orta tuşa bastınız.");break;
default:alert("Eylem Tanımlanamadı");break;
}
}
</script>
Kısaca...
- 2. 3. 4. Mouse tuş numaraları verildi, bu numaralandırma modern browserlar için (Firefox, safari, chrome, opera).
- 5. "ie9" öncesi "internet explorer" için tuş numaralandırması.
- 11. Mouse üzerindeki olaya göre tetiklenen olay fonksiyonu. Bu fonksiyonu "body" etiketinde "onmosedown" metoduyla tetikleyeceğiz.
Aşağıda uygulamanın tüm kodlarını görebilirsiniz.
<body onmousedown="mouse(event)">
<p>Mouse tuşlarından herhangi birini tıklayınız.</p>
<script type="text/javascript">
var solTus=0;
var ortaTus=1;
var sagTus=2;
if(navigator.userAgent.indexOf('MSIE')!=-1)
{
var solTus=1;
var ortaTus=4;
var sagTus=2;
}
function mouse(e){
switch(e.button)
{
case solTus:alert("Sol tuşa bastınız.");break;
case sagTus:alert("Sağ tuşa bastınız.");break;
case ortaTus:alert("Orta tuşa bastınız.");break;
default:alert("Eylem Tanımlanamadı");break;
}
}
</script>
Sonuç..
Tarayıcı nesnelerden "event" uygulamalarıyla, website üzerindeki nesnelerden bilgi alabilir veya nesneleri yönlendirebilirsiniz, ayrıca mouse uygulamalarını da kontrol edebilirsiniz. "button" özelliği gibi diğer özellikleri de kullanarak işinizi kolaylaştıracak birçok uygulama yapabilirsiniz (Klavye kullanarak browser üzerinde yazı yazmak, mouse'un bulunduğu yere göre bazı animasyonlar yapmak gibi..).
Görüşmek üzere...
