by Eren
18. November 2008 14:41
Javascripti yavaş yavaş sevmeye başladım. Zira ısrarla öğrenmemekte direndiğim bir dildi. Çoğu zaman insanın hayatını kolaylaştırıyor.
İlerde işime yarayacağına innandığım bir olayı buraya not etmek istiyorum.
Malum javascript'te olay tabanlı bir dil. Ama biz jscript olaylarını daha çok ;
<a href=”somepage.htm” name=”linkSomePage” onmouseover=”alert(‘You Moved?’)”
onclick=”alert(‘You Clicked?’)”>
Click Me
</a>
şeklinde kullanıyorduk. Ama istenirse sayfada gerçekleşen olayların tipi öğrenilip ona göre işlem yaptırılabilmektedir.
var myEvent = window.event;
Gerçekleşen olayın tipine göre aşağıdaki gibi işlem yaptırıyoruz;
<script type=”text/javascript”>
function paragraph_eventHandler() {
if (window.event.type == “click”) { //The click event was fired.
alert(“You Clicked Me!”);
} else if (window.event.type == “mouseover”) { //The mouseover event.
alert(“You Tickled Me!”);
}
}
</script>
Bu fonksiyonun ismini olayları yakalayacağımız kontrollere set ederek gerçekleşen olaylarını yakalayabiliriz;
<p onmouseover=”paragraph_eventHandler()”>
Move your mouse over me.
</p>
<p onclick=”paragraph_eventHandler()”>
Click me!
</p>
Peki olayın hangi kontrolde tetiklendiğini nasıl öğreneceğiz?
Bunun için window.event.srcElement nesnesini kullanıyoruz.
var sourceElement = window.event.srcElement;
Kontrolü bu şekilde öğrenip herhangi bir özelliğini aşağıdaki şekilde değiştirebiliriz;
sourceElement.src = "ornek.gif";
Şimdi iyi hoş, güzel şeylerden bahsettik ama bir sorum var. Yukarıda bahsettiğimiz kodlar Internet Explorer'da çalıştığı gibi diğer browser'larda da çalışabilecekmi?
Diğer browserlerda kısaca şöyle farklılıklar vardır.
Mesela olaylara erişim ;
var myEvent = window.event;
şeklinde değilde
function paragraph_eventHandler(evt) {
var eventTarget = evt.target; //Elementin tipi IE dışındaki browser'larda bu şekilde alınıyor.
if (evt.type == “click”) { //Olay tipi tıklama olma durumu.
alert(“You Clicked Me!”);
} else if (evt.type == “mouseover”) { //Olay tipi farenin kontrol üzerinden geçme durumu.
alert(“You Tickled Me!”);
}
}
şeklinde olmaktadır. Yukarıdaki kodlarla mukayese ettiğinizde farkı anlarsınız diye tahmin ediyorum.
Peki tüm bunları tüm browserlerda çalışabilir hale nasıl getirebiliriz? Şu şekilde ;
function image_eventHandler(evt) {
var elementTarget;
if (evt.srcElement) { // browser IE
elementTarget = evt.srcElement;
} else { // browser is IE değil
elementTarget = evt.target;
}
if (evt.type == “mouseover”) { //Fare resmin üzerinde.
elementTarget.src = “o.gif”; //Resmin sorce özelliğini değiştiriyoruz.
}
if (evt.type == “mouseout”) { //Fare resmin üzerinden kaçtı.
elementTarget.src = “x.gif”; //Source özelliğini eski haline getiriyoruz.
}
}
Gördüğünüz gibi yukarda browser kontrolü yapılıp browser tipine göre kod yazılmış.
srcElement objesi sadece IE'de yer aldığı için diğer browserlerde bu nesne null kalacaktır.
Subscribe