Javascript Mouse Olayları
Hepinize merhaba dostlarım :). Bu yazımda sizlere javascript programlama dilinde bazı zamanlarda kullandığımız mouse olaylarından bahsedeceğim. Yine her zamanki gibi heyecan yaptınız öğrenmek için hissediyorum :). Sözü daha fazla uzatmadan gelin hep beraber mouse olaylarının tanımını yapalım ve bunları örneklerle inceleyelim :)
Mouse Olayları Nedir ?
Dostlarım teorik bir anlatım yerine olayın mantığını anlatmayı tercih ettiğimi her zaman dile getirfiğimi biliyorsunuz :). Bu yazımda da aynısını yapıp olayın mantığını anlatacağım :).
Dostlarım mouse olayları bizim web sayfamızda çift tıklama olayımız olsun, mouse yaklaşma , ayrılma ,sağ tuşa basılma gibi olaylarda javascript tarafından tetiklenen işlemlerdir. Her zaman kullanacaksınız diye bir zorunluluk yoktur gerektiğinde kullanılır :). Peki bunlar kaça ayrılır diye soruyorsanız bunlar baya baya uzar gider ama bildiklerimden bahsedeceğm size
- onclick
- oncontextmenu
- ondblclick
- onmouseenter
- onmouseleave
- onmousemove
1-) onclick
Dostlarım bu mouse olayı bizim belirlemiş olduğumuz element üzerinde mouse sol tık yaptığında tetiklenir :). Gelin hızlı bir örnekle inceleyelim
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small onclick="fare_tiklandi()">Fare Sol Tıklasın</small>
<script>
function fare_tiklandi(){
alert("Fare Sol Tuşu Tıklandı");
}
</script>
</body>
</html>
Belirttiğimiz small etiketine sol tık yapıldığında dostlarım ekrana bir alert uyarısı gelecektir dostlarım :).
2-) oncontextmenu
Dostlarım bu mouse olayı onclick gibi çalışır yalnız tek bir fark var :). O sol tık yapınca çalışır bu sağ tık yapınca çalışır :). Gelin bir örnek yapalım :).
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small oncontextmenu="fare_sag_tiklandi()">Fare Sağ Tıklasın</small>
<script>
function fare_sag_tiklandi(){
alert("Fare Sağ Tuşu Tıklandı");
}
</script>
</body>
</html>
Gördüğünüz gibi dostlarım :). Elementimiz üzerinde sağ tık yapıldıığı zaman ekranımıza "Fare Sağ Tuşu Tıklandı" yazacaktır :).
3-) ondblclick
Dostlarım artık isimlerinden az çok anlıyor olduğunuza eminim :). Bu olay mouse element üzerinde çift tık yapıldığında (yani double click) yapıldığında çalışacaktır :). Hızlıca bunu da gerçekleştirelim
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small ondblclick="fare_double_tiklandi()">Fare Çift Tıklasın</small>
<script>
function fare_double_tiklandi(){
alert("Fare Sol Tuşu Çift Tıklandı");
}
</script>
</body>
</html>
Örnekte belirttiğimiz kod dostlarım element üzerinde çift tıklama yapar yapmaz ekrana "Fare Sol Tuşu Çift Tıklandı" diye mesaj bastıracaktır :).
4-) onmouseenter
Dostlarım bu mouse olayını görünce öncelikle ingilizce bir çevirisini yapmayı denemişsinizdir :). Enter in çevirisi Giriş demek :). Ama bu olayın tam işlevi ne merak da ettiğinizi biliyorum :).
Dostlarım bu olayın temel amacı element üzerine fare gittiğinde çalışacak olan bir olaydır :). Örnek için sabırsızlandığınızı seziyorum :). Gelin hadi bunu da inceleyelim
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small onmouseenter="fare_uzerine_geldi()">Fare Üzerine Gelsin</small>
<script>
function fare_uzerine_geldi(){
alert("Hoop Kardeşim Nereye :)");
}
</script>
</body>
</html>
Dostlarım faremiz gelip element üzerine konduğunda :) ekranımızda "Hoop Kardeşim Nereye :)" yazısı çıkacaktır :). Mouse olaylarının kullanımının ne kadar basit olduğunu anladığınıza eminim :)
5-) onmouseleave
Dostlarım uzun ve karmaşık anlatıma sözü uzatmaya hiç gerek yok bu olayda :). onmouseenter işleminin tam tersini yapıyor yani mouse element üzerinden ayrıldığında çalışıyor :). Bunun da örneğini yapalım :)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small onmouseleave="fare_ayrildi()">Fare Ayrıldı mı ?</small>
<script>
function fare_ayrildi(){
alert("Fare Ayrıldı");
}
</script>
</body>
</html>
Dostlarım örnekte belirtildiği gibi mouse miz "Fare Ayrıldı mı ?" yazısının üzerinden ayrılır ayrılmaz ekrana "Fare Ayrıldı" mesajını verecektir :). Yavaş yavaş son olayımıza geliyoruz artık :).
6-) onmousemove
Son olayımız olan onmousemove ise dostlarım element üzerine ne gelme ne de ayrılma ile ilgilidir :). Element üzerinde küçük çocuklar gibi gezindiğimizde bu olay sürekli çalışacaktır :). Gelin onu da inceleyelim ama bu sefer de console.log() ile gerçekleştirelim bunu
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Mouse Olayları | MFSoftware Blog</title>
</head>
<body>
<small onmousemove="fare_geziniyor()">Fare Geziniyor mu ?</small>
<script>
function fare_geziniyor(){
console.log("Beni Rahat Bırakın :)");
}
</script>
</body>
</html>
Evet dostlarım :). F12 tuşuna bastığınızda ve mouse ile element üzerinde gezindiğinizde console.log() ile birden fazla mesaj alacaksınız :). Sebebi ise belli element üzerinde geziniyorsunuz ve bir olay oluşturuyorsunuz :).
Dostlarım bu yazımda anlatacaklarım bu kadar :). Sizlerden isteğim istikrarlı olmanız ve bol pratik yapmanızdır :). Bu ikisini sürekli uyguladığınız taktirde başarınız kaçınılmaz olacaktır :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle :). İyi çalışmalar
Yazar Hakkında
Kendi Halinde Bir Backend Developer