Javascript Eventleri | Onclick - Onmouseover - Onmouseout

Javascript'te bazı olayları yakalayabilmek için bir tetikleyiciye ihtiyaç vardır. Bu ihtiyaçları da kendi içerisinde tanımlı olan metotlar ile gerçekleştireceğiz. Bazı durumlarda kullanıcıdan veri alırken onun belirlediği bir cevap ile değil de, önceden tanımlı olan veriler arasında bir veriyi seçmesini isteriz. Bu durum karşısında kullanıcının seçmiş olduğu veriyi nasıl alacağımıza bağlıdır. Örnek olarak kullanıcıdan gelecek değer eğer onun tıklama ile gerçekleşecekse o zaman onclick eventini kullanabiliriz. Bunun dışında eğer mouse yardımı ile sadece üstüne gelerek yapılacak işlemler içinse Onmouseover eventini kullanmamız yeterli olacaktır.

Onclick Eventi İle Veri İşlemleri (Mouse ile Tıklatıldığında)

Onclick, yani mouse ile tanımlanan verilerden bir veya birkaçı tıklatıldığında yapılacak işlemleri belirtmektedir. Bu işlemin gerçekleşmesi için tıklatma işlemi yapılacak olan HTML tagına click="" belirtecinin içinde ya işlem yapılacak fonksiyon yazılır, ya da direk olarak yapılacak işleme ait kodlar yer alır. Tabi ki tercihen fonksiyon belirtmek daha mantıklı bir davranış olacaktır.

Basit bir örnek ile onclick olayının nasıl kullanılacağına dair bir bilgi vermiş olayım. Öncelikle iki adet input oluşturalım. Daha sonra bu inputlara click değerlerini girip bunlara ait fonksiyon ve içeriklerini oluşturalım.

<script type="text/javascript">
function Goster() {
document.getElementById('veri').innerHTML = "Gösterme İşlemi Aktif Edildi.";
}
function Gizle() {
document.getElementById('veri').innerHTML = 'Gizleme İşlemi Aktif Edildi.';
}
</script>

<input type="button" value="Göster" onClick="Goster()" />
<input type="button" value="Gizle" onClick="Gizle()" />

<div id="veri"></div>

Bu kod ile Göster butonunu tıklatıldığında Goster() fonksiyonu işlem görecektir. Gizle botunu tıklatıldığında ise Gizle() fonksiyonu işleme tabi tutulacaktır. Tıklatmaya göre gerçekleştirilen işlemler bu şekilde yapılmaktadır.

Şimdi ise bu tıklatma işlemine biraz daha gelişmiş bir örnek hazırlayalım. İlk örneğimizde iki adet fonksiyon ve ona göre işlem hazırlanması gerektiğini belirtmiştik. Şimdi ise bu durumu tek bir fonksiyon işlemi altında nasıl yapabiliriz bunu göreceğiz. Tabi bu kullanımda farklı bir yol olduğundan ilk örneğe pek benzemeyecektir.

Bu örneğimizde kutucuklar oluşturalım. Daha sonrasında ise bu kutulardan hangisine tıklanırsa o zaman farklı bir renge bürünmesini sağlayalım. Daha doğrusu tıklanma eventi ile class değerlerinin değiştirilmesini sağlayalım.

Şimdi bize kutu adında classlar, bu classlara şekil verecek olan css kodları ve artından click işleminin yapılacağı javascript kodları lazım. Onları da şu şekilde yazalım.

<style>
.sekil1{ float:left; margin:10px; background:#fff; width:100px; height:100px; cursor:pointer;border:1px solid red}
.sekil2{ float:left; margin:10px; background:#000; width:100px; height:100px; cursor:pointer;border:1px solid blue}
</style>

<script>
function sekildegistir(veri){
if(veri.className == "sekil1"){
veri.className = "sekil2";
} else {
veri.className = "sekil1";
}
}
</script>

<div class="sekil1" onclick="sekildegistir(this)"></div>
<div class="sekil1" onclick="sekildegistir(this)"></div>
<div class="sekil1" onclick="sekildegistir(this)"></div>
<div class="sekil1" onclick="sekildegistir(this)"></div>

Yukarıdaki örnekte yer alan fonksiyonda, tıklatma ile gelen değere (this ile gelen değer) göre bir işlem gerçekleştiriyoruz. Bu işlemde gelen değer sekil1 ise sekil2 yapmasını sekil2 ise sekil1 yapmasını sağlıyoruz. Böylelikle gelen değere göre tek fonksiyon altında bir işlem yapmış oluyoruz. Burada this tanımlaması; hangi class değerine ait olan verinin geldiğini belirtmektedir. Bundan dolayı belki de önemli bir noktası this diyebilirim.

Onmouseover - Onmouseout Eventi İle Veri İşlemleri

Bu kullanım ise click eventinin tersine mouse ile üstüne geldiğinde veya terk ettiğinde işlem görmektedir. Mouse ile üstüne gelindiğinde işlem yapılacaksa Onmouseover, mouse ile üstünden çektikten sonra işlem yapılacaksa Onmouseout Eventi kullanılır.

Yukarıda vermiş olduğumuz örnekleri değiştirmeden aynısını bu fonksiyonlara uyarlayarak nasıl bir çalışmaya prensibi var görelim.

<script type="text/javascript">
function ustunde() {
document.getElementById('veri').innerHTML = "Mouse ile Yazının Üstüne Geldiniz!";
}
function degil() {
document.getElementById('veri').innerHTML = "Mouse'u yazının üstünden çektiniz.";
}
</script>

<div onmouseover="ustunde()" onmouseout="degil()">Bu Yazının Üstüne Mouse ile Gel ve Sonra Çek!</div>
<div id="veri"></div>

İlk yapmış olduğumuz örneği bu şekilde düzenlediğimizde; Bu Yazının Üstüne Mouse İle Gel ve Sonra Çek! Yazısıyla bir etkileşime girdiğimizde, yapmış olduğumuz olay veri de yer alacaktır. Böylelikle bir yazının ya da elementin üstüne gelindiğinde ya da üstündeyken terk ettiğimizde işlemin nasıl yapılacağını görmüş olduk. Diğer örneği de aynı şekilde bu yapıya çevirebilirsiniz.
- 31.07.2014 / 18:03:50 5

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

10:57 Php Dersleri

Php ile Dosya Upload İşlemi Yapımı

Kategori: Php Dersleri | 02.05.2013
3:28 Html Dersleri

Alexa widget oluşturma

Kategori: Html Dersleri | 03.05.2013
3:44 Php Dersleri

Php ile Meta Tag Bilgilerini Çekme | get_meta_tag();

Kategori: Php Dersleri | 15.10.2013
Genel Makaleler
5:38 Php Dersleri

Echo ve Print Komutlarının Kullanımı

Kategori: Php Dersleri | 01.02.2012

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.