Bu makalede sizlerle kabaca fare olaylarını incelemey çalışacağız. Fare olayları web tarayıcıda adı verilen olay gerçekleştiğinde tarayıcı tarafından otomatik olarak çalıştırılan birer fonksiyondurlar. Örneğin bir nesneni üzerine geldiğinizde o nesnenin onMouseOver() olayını tetiklemiş olursunuz. Benzer biçimde fare işaretçisi bir nesnenin üzerinden ayrıldığında ise onMouseOut olayını tetiklemiş olur. Bunun gibi fare işaretçisi üzerinde hareket ettirildiğinde onMouseMove(), nesne üzerinde farenin sol tuşuna basılırken onMouseDown(), farenin sol tuşu bırakılırken ise onMouseUp() olayları tetiklenmiş olur bu olaylarda siz hangi işlemi yapmak isterseniz o işleme ait fonksiyonu olaya atarsınız. Misal, farenin sol tuşuna basılırken verileriListele() fonksiyonunun çalışmasını istiyorsanız onMouseDown="verileriListele()" ifadesini yazarsınız. Burada aslında sizin dikkat etmeniz gereken nokta ASP.NET ile ilgili bölümde; örneğin ASP.NET araç kutusunu kullanarak eklediğiniz bir butona/düğmeye onclick() olayı atayamazsınız çünkü bu olay gerçekleştiğinde form verileri postback işlemine tabi tutulur ve sunucuya gönderilir. Bu bu durumda aynı düğme için JavaScript olarak bir click() olayı yazmamız mümkün değil mi? Elbette mümkün fakat yazarken onClick=""; şeklinde değil de onClientClick=""; biçiminde kullanmalısınız. Bir örnek ile olayı açıklığa kavuşturalım:
oncClientClick="return kontrol();" yazıldığında ASP butonuna basıldığında önce kontrol(); fonksiyonu çağrılır şayet bu fonksiyonda işler yolunda gitmiş ise veriler documet.getElementById("formAdi").submit(); ile sunucuya gönderilirken return(false); ifadesi yazılarak da işler yolunda gitmemişse sayfanın sunucuya gitmesi engellenebilir. Fare olaylarını gerçek bir web sayfası üzerine birkaç div nesnesi yerleştirerek test edelim. Bu amaçla:
Yeni bir web sayfası oluşturuyoruz ve aşağıdaki gibi bir tasarım yapıyoruz
ya da olmadı doğrudan aşağıda verilen HTML kodlarını da yazabilirsiniz size kalmış bir olay.
< html lang="tr" >
< head >
< meta charset="utf-8" / >
< title >..:: Fare olayları ::..< / title >
< style type="text/ css" >
#baslikTD{
background-color:#eee;
color:gray;
text-align:center;
font-size:24px;
border:1px solid gray;
}
#tasarimciTD{
background-color:#ddd;
color:crimson;
text-align:right;
padding-right: 10px;
font-size:14px;
font-weight: bold;
border:1px solid gray;
}
#konumTD{
color:black;
background-color:#ddd;
text-align:left;
font-size:12px;
border:1px solid gray;
}
.kutu{
width:150px;
height:150px;
color:#333;
font-size:24px;
border:2px solid #333;
float:left;
margin-left: 10px;
margin-top:10px;
background-color: lavender;
}
< / style >
< script type="text/ javascript" language="javascript" >
function fareOlayi(id,islem){
}
< / script >
< / head >
< body >
< table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
< tr >
< td height="5%" id="baslikTD" colspan="3" >Fare olayları< / td >
< / tr >
< tr >
< td colspan="3" height="90%" align="center" valign="middle" >
< !--Desen yapilacak tablo basi-- >
< div id="kutu1" class="kutu" onmouseover="fareOlayi(1,'uzerinde')" >1< br / > < span style="font-size:16px" >onmouseover()< / span >< / div >
< div id="kutu2" class="kutu" onmouseout="fareOlayi(2,'ayrildi')" >2< br / > < span style="font-size:16px" >onmouseout()< / span >< / div >
< div id="kutu3" class="kutu" onmousedown="fareOlayi(3,'solTusBasiliyor')" >3< br / > < span style="font-size:16px" >onmousedown()< / span >< / div >
< div id="kutu4" class="kutu" onmouseup="fareOlayi(4,'solTusBirakiliyor')" >4< br / > < span style="font-size:16px" >onmouseup()< / span >< / div >
< div id="kutu5" class="kutu" onmousemove="fareOlayi(5,'hareketEdiyor')" >5< br / > < span style="font-size:16px" >onmousemove()< / span >< / div >
< div style="float:left; background-color: #ffffcc; margin-left:10px; margin-top: 10px; height:150px; text-align: left; border:2px solid #333; padding:5px 5px" >
< ol >
< li >nolu nesnenin üzerine fare ikonunu gelirken,< / li >
< li >nolu nesnenin üzerinden fare ikonu ayrılırken, < / li >
< li >nolu nesne üzerinde farenin sol tusuna basarken,< / li >
< li >nolu nesne üzerinde farenin sol tuşunu bırakırken< / li >
< li >nolu nesne üzerinde fare ikonu hareket ederken,< / li >
< / ol >
gerçekleşen işlemleri gözlemleyiniz.
< / div >
< !-- Desen yapilacak tablo sonu -- >
< / td >
< / tr >
< tr >
< td height="5%" width="10%" id="konumTD" >< / td >
< td height="5%" width="80%" align="center" >
< input type="button" value="TAZELE" onclick="window.open('fareOlaylari.html','_self');" / >
< / td >
< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr< / td >
< / tr >
< / table >
< / body >
< / html >
Son olarak da fare olayları tetiklendiğinde çalışan fareOlayı() isimli fonksiyonun kodlarını yazarak sayfamızı test ediyoruz ,hepsi bu kadar basit. Eğer herşey yolunda gitmişse bunun gibi bir sonuç elde etmeniz gerekiyor.
function fareOlayi(id,islem){
var nesne=eval("kutu" + id);
if(islem=="uzerinde"){
nesne.innerHTML="< span style=\"color:red\" >Fare nesnenin üzerine geldi< / span >";
}else if(islem=="ayrildi"){
nesne.innerHTML="< span style=\"color:red\" >Fare nesnenin üzerinden ayrıldı.< / span >";
}else if(islem=="solTusBasiliyor"){
nesne.innerHTML="< span style=\"color:red\" >Farenin sol tusuna basiliyor.< / span >";
}else if(islem=="solTusBirakiliyor"){
nesne.innerHTML="< span style=\"color:red\" >Farenin sol tuşu bırakılıyor.< / span >";
}else if(islem=="hareketEdiyor"){
nesne.innerHTML="< span style=\"color:red\" >Fare nesnenin üzerinde hareket ediyor.< / span >";
}
}